Loading indicators (progress & spinners)
Use spinners and loading indicators to communicate progress and improve perceived performance.
Progress bars
Section titled “Progress bars”Use progress bars when you know the percentage. A progress bar is made of a container (.progress) and a bar element (.progress-bar).
Progress example
Section titled “Progress example”Use progress bars and spinners to indicate loading, processing, or completion.
Progress: Height
Section titled “Progress: Height”Use Height to make thicker or thinner progress bars.
Progress bar element
Section titled “Progress bar element”The inner .progress-bar element controls the fill amount and variant styling.
Progress Bar: Width
Section titled “Progress Bar: Width”Set Width to control the percentage fill. In production, you’ll typically bind this to data.
Progress Bar: Background
Section titled “Progress Bar: Background”Use Back Color to set the bar’s color variant.
Progress Bar: Striped & animated
Section titled “Progress Bar: Striped & animated”Use Striped and Animated for visual emphasis during long operations.
Spinners
Section titled “Spinners”Spinners are best when you don’t know the percentage (indeterminate loading).
Border spinner
Section titled “Border spinner”Border spinners are a compact indicator for indeterminate loading.
Spinner: Color
Section titled “Spinner: Color”Use Color to set the spinner variant.
Spinner: Size
Section titled “Spinner: Size”Use Type to switch between default and small sizes.
Growing spinner
Section titled “Growing spinner”Growing spinners are a softer, pulsing alternative to border spinners.
Next steps
Section titled “Next steps”Continue with other Components tours or return to the Components menu.