Progress

Basic

{% component "Progress" %}
                {% component "ProgressBar" now=25 / %}
            {% endcomponent %}

Preview:

Basic 0 Percent

{% component "Progress" %}
                {% component "ProgressBar" now=0 / %}
            {% endcomponent %}

Preview:

Basic 50 Percent

{% component "Progress" %}
                {% component "ProgressBar" now=50 / %}
            {% endcomponent %}

Preview:

Basic 75 Percent

{% component "Progress" %}
                {% component "ProgressBar" now=75 / %}
            {% endcomponent %}

Preview:

Basic 100 Percent

{% component "Progress" %}
                {% component "ProgressBar" now=100 / %}
            {% endcomponent %}

Preview:

Height 1Px

{% component "Progress" height="1px" %}
                {% component "ProgressBar" now=25 / %}
            {% endcomponent %}

Preview:

Height 20Px

{% component "Progress" height="20px" %}
                {% component "ProgressBar" now=25 / %}
            {% endcomponent %}

Preview:

With Label

{% component "Progress" %}
                {% component "ProgressBar" now=25 %}25%{% endcomponent %}
            {% endcomponent %}

Preview:

25%

Variant Success

{% component "Progress" %}
                {% component "ProgressBar" now=25 variant="success" / %}
            {% endcomponent %}

Preview:

Variant Info

{% component "Progress" %}
                {% component "ProgressBar" now=50 variant="info" / %}
            {% endcomponent %}

Preview:

Variant Warning

{% component "Progress" %}
                {% component "ProgressBar" now=75 variant="warning" / %}
            {% endcomponent %}

Preview:

Variant Danger

{% component "Progress" %}
                {% component "ProgressBar" now=100 variant="danger" / %}
            {% endcomponent %}

Preview:

Variant Primary

{% component "Progress" %}
                {% component "ProgressBar" now=30 variant="primary" / %}
            {% endcomponent %}

Preview:

Variant Secondary

{% component "Progress" %}
                {% component "ProgressBar" now=40 variant="secondary" / %}
            {% endcomponent %}

Preview:

Variant Light

{% component "Progress" %}
                {% component "ProgressBar" now=60 variant="light" / %}
            {% endcomponent %}

Preview:

Variant Dark

{% component "Progress" %}
                {% component "ProgressBar" now=80 variant="dark" / %}
            {% endcomponent %}

Preview:

Variant Success With Label

{% component "Progress" %}
                {% component "ProgressBar" now=25 variant="success" %}25%{% endcomponent %}
            {% endcomponent %}

Preview:

25%

Variant Info With Label

{% component "Progress" %}
                {% component "ProgressBar" now=50 variant="info" %}50%{% endcomponent %}
            {% endcomponent %}

Preview:

50%

Variant Warning With Label

{% component "Progress" %}
                {% component "ProgressBar" now=75 variant="warning" %}75%{% endcomponent %}
            {% endcomponent %}

Preview:

75%

Variant Danger With Label

{% component "Progress" %}
                {% component "ProgressBar" now=100 variant="danger" %}100%{% endcomponent %}
            {% endcomponent %}

Preview:

100%

Multiple Bars

{% component "ProgressStacked" %}
                {% component "Progress" attrs:style="width: 15%" %}
                    {% component "ProgressBar" now=15 / %}
                {% endcomponent %}
                {% component "Progress" attrs:style="width: 30%" %}
                    {% component "ProgressBar" now=30 variant="success" / %}
                {% endcomponent %}
                {% component "Progress" attrs:style="width: 20%" %}
                    {% component "ProgressBar" now=20 variant="info" / %}
                {% endcomponent %}
            {% endcomponent %}

Preview:

Striped Basic

{% component "Progress" %}
                {% component "ProgressBar" now=10 striped=True / %}
            {% endcomponent %}

Preview:

Striped Success

{% component "Progress" %}
                {% component "ProgressBar" now=25 variant="success" striped=True / %}
            {% endcomponent %}

Preview:

Striped Info

{% component "Progress" %}
                {% component "ProgressBar" now=50 variant="info" striped=True / %}
            {% endcomponent %}

Preview:

Striped Warning

{% component "Progress" %}
                {% component "ProgressBar" now=75 variant="warning" striped=True / %}
            {% endcomponent %}

Preview:

Striped Danger

{% component "Progress" %}
                {% component "ProgressBar" now=100 variant="danger" striped=True / %}
            {% endcomponent %}

Preview:

Striped Primary

{% component "Progress" %}
                {% component "ProgressBar" now=40 variant="primary" striped=True / %}
            {% endcomponent %}

Preview:

Striped Secondary

{% component "Progress" %}
                {% component "ProgressBar" now=60 variant="secondary" striped=True / %}
            {% endcomponent %}

Preview:

Striped Light

{% component "Progress" %}
                {% component "ProgressBar" now=70 variant="light" striped=True / %}
            {% endcomponent %}

Preview:

Striped Dark

{% component "Progress" %}
                {% component "ProgressBar" now=90 variant="dark" striped=True / %}
            {% endcomponent %}

Preview:

Animated Striped

{% component "Progress" %}
                {% component "ProgressBar" now=75 animated=True / %}
            {% endcomponent %}

Preview:

Animated Striped Success

{% component "Progress" %}
                {% component "ProgressBar" now=50 variant="success" animated=True / %}
            {% endcomponent %}

Preview:

Animated Striped Info

{% component "Progress" %}
                {% component "ProgressBar" now=60 variant="info" animated=True / %}
            {% endcomponent %}

Preview:

Animated Striped Warning

{% component "Progress" %}
                {% component "ProgressBar" now=80 variant="warning" animated=True / %}
            {% endcomponent %}

Preview:

Animated Striped Danger

{% component "Progress" %}
                {% component "ProgressBar" now=90 variant="danger" animated=True / %}
            {% endcomponent %}

Preview: