Progress bars

Give the user feedback about the actions that occur on the page.

Static progress

Highlight progress bars using contextual classes.

Supported classes
  • .progress-bar-primary
  • .progress-bar-secondary
  • .progress-bar-default
  • .progress-bar-success
  • .progress-bar-info
  • .progress-bar-warning
  • .progress-bar-danger
  • .progress-bar-dark
Progress animation

Use animations to make the page dynamic. It is recommended to use it as a nondeterministic element, but you can neglect it.

You can use three animation variants:

  • Indeterminate .progress-animated
  • Colored .progress-colored
  • Combined .progress-animate.progress-colored
Base variant
Colored static
Combined variant