Stroyka Admin - eCommerce Dashboard Template

Basic Example #

Progress components are built with two HTML elements, some CSS to set the width, and a few attributes.

We use the .progress as a wrapper to indicate the max value of the progress bar.
We use the inner .progress-bar to indicate the progress so far.
The .progress-bar requires an inline style, utility class, or custom CSS to set their width.
The .progress-bar also requires some role and aria attributes to make it accessible.

Put that all together, and you have the following examples.

Example

<div class="progress" style="--sa-progress--value: 0%">
    <div
        class="progress-bar progress-bar-sa-primary"
        role="progressbar"
        aria-valuenow="0"
        aria-valuemin="0"
        aria-valuemax="100"
    ></div>
</div>
<div class="progress mt-4" style="--sa-progress--value: 25%">
    <div
        class="progress-bar progress-bar-sa-primary"
        role="progressbar"
        aria-valuenow="25"
        aria-valuemin="0"
        aria-valuemax="100"
    ></div>
</div>
<div class="progress mt-4" style="--sa-progress--value: 50%">
    <div
        class="progress-bar progress-bar-sa-primary"
        role="progressbar"
        aria-valuenow="50"
        aria-valuemin="0"
        aria-valuemax="100"
    ></div>
</div>
<div class="progress mt-4" style="--sa-progress--value: 75%">
    <div
        class="progress-bar progress-bar-sa-primary"
        role="progressbar"
        aria-valuenow="75"
        aria-valuemin="0"
        aria-valuemax="100"
    ></div>
</div>
<div class="progress mt-4" style="--sa-progress--value: 100%">
    <div
        class="progress-bar progress-bar-sa-primary"
        role="progressbar"
        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 .

Example

25%

<div class="progress" style="--sa-progress--value: 25%">
    <div
        class="progress-bar progress-bar-sa-primary"
        role="progressbar"
        aria-valuenow="25"
        aria-valuemin="0"
        aria-valuemax="100"
    >
        25%
    </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.

Example

<div class="progress" style="height: 8px; --sa-progress--value: 25%">
    <div
        class="progress-bar progress-bar-sa-primary"
        role="progressbar"
        aria-valuenow="25"
        aria-valuemin="0"
        aria-valuemax="100"
    ></div>
</div>
<div class="progress mt-4" style="height: 20px; --sa-progress--value: 25%">
    <div
        class="progress-bar progress-bar-sa-primary"
        role="progressbar"
        aria-valuenow="25"
        aria-valuemin="0"
        aria-valuemax="100"
    ></div>
</div>

Backgrounds #

There are several different color options for the appearance of progress bars.

Example

17%

33%

50%

67%

83%

100%

<div class="progress" style="--sa-progress--value: 16.666666666666664%">
    <div
        class="progress-bar progress-bar-sa-primary"
        role="progressbar"
        aria-valuenow="16.666666666666664"
        aria-valuemin="0"
        aria-valuemax="100"
    >
        17%
    </div>
</div>
<div class="progress mt-4" style="--sa-progress--value: 33.33333333333333%">
    <div
        class="progress-bar progress-bar-sa-success"
        role="progressbar"
        aria-valuenow="33.33333333333333"
        aria-valuemin="0"
        aria-valuemax="100"
    >
        33%
    </div>
</div>
<div class="progress mt-4" style="--sa-progress--value: 50%">
    <div
        class="progress-bar progress-bar-sa-info"
        role="progressbar"
        aria-valuenow="50"
        aria-valuemin="0"
        aria-valuemax="100"
    >
        50%
    </div>
</div>
<div class="progress mt-4" style="--sa-progress--value: 66.66666666666666%">
    <div
        class="progress-bar progress-bar-sa-warning"
        role="progressbar"
        aria-valuenow="66.66666666666666"
        aria-valuemin="0"
        aria-valuemax="100"
    >
        67%
    </div>
</div>
<div class="progress mt-4" style="--sa-progress--value: 83.33333333333334%">
    <div
        class="progress-bar progress-bar-sa-danger"
        role="progressbar"
        aria-valuenow="83.33333333333334"
        aria-valuemin="0"
        aria-valuemax="100"
    >
        83%
    </div>
</div>
<div class="progress mt-4" style="--sa-progress--value: 100%">
    <div
        class="progress-bar progress-bar-sa-dark"
        role="progressbar"
        aria-valuenow="100"
        aria-valuemin="0"
        aria-valuemax="100"
    >
        100%
    </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.

Example

<div class="progress" style="--sa-progress--value: 16.666666666666664%">
    <div
        class="progress-bar progress-bar-sa-primary progress-bar-striped"
        role="progressbar"
        aria-valuenow="16.666666666666664"
        aria-valuemin="0"
        aria-valuemax="100"
    ></div>
</div>
<div class="progress mt-4" style="--sa-progress--value: 33.33333333333333%">
    <div
        class="progress-bar progress-bar-sa-success progress-bar-striped"
        role="progressbar"
        aria-valuenow="33.33333333333333"
        aria-valuemin="0"
        aria-valuemax="100"
    ></div>
</div>
<div class="progress mt-4" style="--sa-progress--value: 50%">
    <div
        class="progress-bar progress-bar-sa-info progress-bar-striped"
        role="progressbar"
        aria-valuenow="50"
        aria-valuemin="0"
        aria-valuemax="100"
    ></div>
</div>
<div class="progress mt-4" style="--sa-progress--value: 66.66666666666666%">
    <div
        class="progress-bar progress-bar-sa-warning progress-bar-striped"
        role="progressbar"
        aria-valuenow="66.66666666666666"
        aria-valuemin="0"
        aria-valuemax="100"
    ></div>
</div>
<div class="progress mt-4" style="--sa-progress--value: 83.33333333333334%">
    <div
        class="progress-bar progress-bar-sa-danger progress-bar-striped"
        role="progressbar"
        aria-valuenow="83.33333333333334"
        aria-valuemin="0"
        aria-valuemax="100"
    ></div>
</div>
<div class="progress mt-4" style="--sa-progress--value: 100%">
    <div
        class="progress-bar progress-bar-sa-dark progress-bar-striped"
        role="progressbar"
        aria-valuenow="100"
        aria-valuemin="0"
        aria-valuemax="100"
    ></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.

Example

<div class="progress" style="--sa-progress--value: 25%">
    <div
        class="
            progress-bar
            progress-bar-sa-primary
            progress-bar-striped
            progress-bar-animated
        "
        role="progressbar"
        aria-valuenow="25"
        aria-valuemin="0"
        aria-valuemax="100"
    ></div>
</div>