Basic usage of the progress bar of the BootStrap component.

Basic usage of the progress bar of the BootStrap component.

1. Basic usage of progress bars

Mainly dependent on. progress and. progress-bar

Aria-valuenow indicates the current value

Aria-valuemin indicates the minimum value.

Aria-valuemax indicates the maximum value.

Width: 60% indicates the current progress bar position

<div class="progress">  <div class="progress-bar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div></div>

2. progress bar with a prompt label

<div class="progress">  <div class="progress-bar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">    <span>60%</span>  </div></div>

3. Effect Based on situation changes

<div class="progress">  <div class="progress-bar progress-bar-danger" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">    <span>60%</span>  </div></div><div class="progress">  <div class="progress-bar progress-bar-info" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">    <span>60%</span>  </div></div><div class="progress">  <div class="progress-bar progress-bar-success" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">    <span>60%</span>  </div></div><div class="progress">  <div class="progress-bar progress-bar-warning" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">    <span>60%</span>  </div></div>

. Progress-bar-danger
. Progress-bar-info
. Progress-bar-success
. Progress-bar-warning

4. stripe Effect

. Progress-bar-striped can be used with classes in other States

<div class="progress">  <div class="progress-bar progress-bar-warning progress-bar-striped" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">    <span>60%</span>  </div></div>

5. animation effect

Add the. active class for. progress-bar-striped to show the animation effect from right to left.

<div class="progress">  <div class="progress-bar progress-bar-striped active" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">    <span>60%</span>  </div></div>

6. Stack Effect

Place multiple progress bars in the same. SS so that they are stacked.

<div class="progress">  <div class="progress-bar progress-bar-success" style="width: 35%">    <span class="sr-only">35% Complete (success)</span>  </div>  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">    <span class="sr-only">20% Complete (warning)</span>  </div>  <div class="progress-bar progress-bar-danger" style="width: 10%">    <span class="sr-only">10% Complete (danger)</span>  </div></div>

The above section describes the basic usage of the progress bar of the BootStrap component. I hope it will be helpful to you. If you have any questions, please leave a message and I will reply to you in time. Thank you very much for your support for the help House website!