Progress
LeptonX uses
Bootstrap Progress's
component's latest version.
Documentation and examples for using Bootstrap custom progress bars featuring support for stacked
bars, animated backgrounds, and text labels.
Basic
Put that all together, and you have the following examples.
Preview
HTML
<div class="progress my-2">
<div
class="progress-bar"
role="progressbar"
aria-valuenow="0"
aria-valuemin="0"
aria-valuemax="100"
></div>
</div>
<div class="progress my-2">
<div
class="progress-bar"
role="progressbar"
style="width: 25%"
aria-valuenow="25"
aria-valuemin="0"
aria-valuemax="100"
></div>
</div>
<div class="progress my-2">
<div
class="progress-bar"
role="progressbar"
style="width: 50%"
aria-valuenow="50"
aria-valuemin="0"
aria-valuemax="100"
></div>
</div>
<div class="progress my-2">
<div
class="progress-bar"
role="progressbar"
style="width: 75%"
aria-valuenow="75"
aria-valuemin="0"
aria-valuemax="100"
></div>
</div>
<div class="progress my-2">
<div
class="progress-bar"
role="progressbar"
style="width: 100%"
aria-valuenow="100"
aria-valuemin="0"
aria-valuemax="100"
></div>
</div>
Labels
Add labels to your progress bars by placing text within the .progress-bar.
Preview
HTML
<div class="progress my-2">
<div
class="progress-bar"
role="progressbar"
style="width: 25%"
aria-valuenow="25"
aria-valuemin="0"
aria-valuemax="100"
>
25%
</div>
</div>
<div class="progress my-2">
<div
class="progress-bar"
role="progressbar"
style="width: 50%"
aria-valuenow="50"
aria-valuemin="0"
aria-valuemax="100"
>
50%
</div>
</div>
<div class="progress my-2">
<div
class="progress-bar"
role="progressbar"
style="width: 75%"
aria-valuenow="75"
aria-valuemin="0"
aria-valuemax="100"
>
75%
</div>
</div>
<div class="progress my-2">
<div
class="progress-bar"
role="progressbar"
style="width: 100%"
aria-valuenow="100"
aria-valuemin="0"
aria-valuemax="100"
>
100%
</div>
</div>
Height
We only set a height value on the .progress, so if you change that value
the inner .progress-bar will automatically resize accordingly.
Preview
HTML
<div class="progress my-2" style="height: 1px">
<div
class="progress-bar"
role="progressbar"
style="width: 25%"
aria-valuenow="25"
aria-valuemin="0"
aria-valuemax="100"
></div>
</div>
<div class="progress my-2" style="height: 20px">
<div
class="progress-bar"
role="progressbar"
style="width: 25%"
aria-valuenow="25"
aria-valuemin="0"
aria-valuemax="100"
></div>
</div>
Backgrounds
Use background utility classes to change the appearance of individual progress bars.
Preview
HTML
<div class="progress my-2">
<div
class="progress-bar bg-success"
role="progressbar"
style="width: 25%"
aria-valuenow="25"
aria-valuemin="0"
aria-valuemax="100"
>
Success
</div>
</div>
<div class="progress my-2">
<div
class="progress-bar bg-info text-black"
role="progressbar"
style="width: 50%"
aria-valuenow="50"
aria-valuemin="0"
aria-valuemax="100"
>
Info
</div>
</div>
<div class="progress my-2">
<div
class="progress-bar bg-warning"
role="progressbar"
style="width: 75%"
aria-valuenow="75"
aria-valuemin="0"
aria-valuemax="100"
>
Warning
</div>
</div>
<div class="progress my-2">
<div
class="progress-bar bg-danger"
role="progressbar"
style="width: 100%"
aria-valuenow="100"
aria-valuemin="0"
aria-valuemax="100"
>
Danger
</div>
</div>
Multiple bars
Include multiple progress bars in a progress component if you need.
Preview
HTML
<div class="progress my-1">
<div
class="progress-bar"
role="progressbar"
style="width: 15%"
aria-valuenow="15"
aria-valuemin="0"
aria-valuemax="100"
>
Primary
</div>
<div
class="progress-bar bg-secondary"
role="progressbar"
style="width: 30%"
aria-valuenow="30"
aria-valuemin="0"
aria-valuemax="100"
>
Secondary
</div>
<div
class="progress-bar bg-dark"
role="progressbar"
style="width: 20%"
aria-valuenow="20"
aria-valuemin="0"
aria-valuemax="100"
>
Dark
</div>
</div>
Striped
Add .progress-bar-striped to any .progress-bar to apply a stripe via CSS
gradient over the progress bar’s background color.
Preview
HTML
<div class="progress my-1">
<div
class="progress-bar progress-bar-striped"
role="progressbar"
style="width: 10%"
aria-valuenow="10"
aria-valuemin="0"
aria-valuemax="100"
>
Primary
</div>
</div>
<div class="progress my-1">
<div
class="progress-bar progress-bar-striped bg-success"
role="progressbar"
style="width: 25%"
aria-valuenow="25"
aria-valuemin="0"
aria-valuemax="100"
>
Success
</div>
</div>
<div class="progress my-1">
<div
class="progress-bar progress-bar-striped bg-info text-black"
role="progressbar"
style="width: 50%"
aria-valuenow="50"
aria-valuemin="0"
aria-valuemax="100"
>
Info
</div>
</div>
<div class="progress my-1">
<div
class="progress-bar progress-bar-striped bg-warning"
role="progressbar"
style="width: 75%"
aria-valuenow="75"
aria-valuemin="0"
aria-valuemax="100"
>
Warning
</div>
</div>
<div class="progress my-1">
<div
class="progress-bar progress-bar-striped bg-danger"
role="progressbar"
style="width: 100%"
aria-valuenow="100"
aria-valuemin="0"
aria-valuemax="100"
>
Danger
</div>
</div>
Animated stripes
The striped gradient can also be animated. Add .progress-bar-animated to
.progress-bar to animate the stripes right to left via CSS3 animations.
Preview
HTML
<div class="progress my-1">
<div
class="progress-bar progress-bar-striped progress-bar-animated"
role="progressbar"
aria-valuenow="75"
aria-valuemin="0"
aria-valuemax="100"
style="width: 75%"
></div>
</div>
