Icon spinner
Animate loading progress with our rotating iconsIcon spinner
Default icon set Phosphor contains 3 spinner icons. Use
.ph-spinner icon and .spinner class for rotating animation
Icon spinner with gap
Similar to default spinner icon, but icon with
.ph-spinner-gap class has a minor gap between spinner lines
Circle line icon spinner
Regular circle line spinner. To use this icon, add
.ph-circle-notch along with .spinner animation class to
any element
Border spinner
Use the border spinners for a lightweight loading indicatorBorder spinner
Indicate the loading state of a component with Bootstrap spinners, built entirely with HTML, CSS, and no JavaScript
Border spinner sizes
Add .spinner-border-[sm|lg] to make a smaller/larger
spinner that can quickly be used within other components
Border spinner colors
The border spinner uses currentColor for its
border-color, meaning you can customize the color with text color
utilities
Button spinner
Use border spinners in any color within buttons to indicate an action is currently processing or taking place
Button spinner
Border spinners used in input fields in addition to input icon placeholders to indicate loading state
Card overlay
Border spinner can be used in our custom card overlay that indicates a progress of dynamic content loading/updating
Growing spinner
Show loading progress indicator that scales and fadesGrowing spinner
If you don’t fancy a border spinner, switch to the grow spinner. While it doesn’t technically spin, it does repeatedly grow!
Growing spinner sizes
Add .spinner-grow-[sm|lg] to make a smaller/larger spinner
that can quickly be used within other components
Growing spinner colors
The border spinner uses currentColor for its
border-color, meaning you can customize the color with text color
utilities
Button spinner
Use growing spinners in any color within buttons to indicate an action is currently processing or taking place
Button spinner
Growing spinners used in input fields in addition to input icon placeholders to indicate loading state
Card overlay
Growing spinner can be used in our custom card overlay that indicates a progress of dynamic content loading/updating
Progress bars
Custom progress bars featuring support for stacked bars, animated backgrounds, and text labelsBasic progress bar
Progress components are built with two HTML elements, some CSS to set the width, and a few attributes
Progress bar with label
Add labels to your progress bars by placing text within the
.progress-bar container. Font size is adjustable
Striped progress bar
Add .progress-bar-striped to any .progress-bar
to apply a stripe via CSS gradient over the bar’s background color
Rounded progress bar
Add .rounded-pill class to the base .progress
container to make progress bar fully rounded
Animated progress bar
Use .progress-bar-animated in .progress-bar
container to animate the stripes right to left via CSS3 animations
Multiple progress bars
Include multiple progress bars in a progress component with the base
.progress class to display them on 1 line
Color options
Color system includes 11 colors and all of them can be used in progress
bars via .bg-[color] utility classes
Striped progress bars
Since stripes are semi-transparent and displayed on top of the bars, they can be used in any progress bar color
Animated progress bars
Just use a regular method to animate progress bars with
.progress-bar-animated to animate stripes in any bar
Bar height variations
How progress bars height is handled in various progress bar stylesBasic progress bars
We only set a height value on the .progress, so if you
change that value the inner .progress-bar will automatically resize
Striped progress bars
You can either create additional classes for progress bar height or use
inline height property to control bar height
Animated progress bars
Mind the text label size, as in smaller sizes text label can't be shown
due to hidden overflow of the .progress container
