• Default Progress Bars

    Documentation and examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels more details.

    Multiple bars

    Include multiple progress bars in a progress component if you need. Read bootstrap documentaion for more details.

    Progress Bar Height

    We only set a heightvalue on the .progress, so if you change that value the inner .progress-barwill automatically resize accordingly. Read bootstrap documentaion for more details.

    Progress Bar Labels

    Add labels to your progress bars by placing text within the .progress-bar. Read bootstrap documentaion for more details.

    25%
    50%
    75%
    100%

    Striped Progress Bar

    Add .progress-bar-stripedto any .progress-barto apply a stripe via CSS gradient over the progress bar’s background color. Read Bootstrap documentaion more details.

    Animate Progress Bar

    The striped gradient can also be animated. Add .progress-bar-animated to .progress-bar to animate the stripes right to left via CSS3 animations. Read Bootstrap documentaion more details.