Spinners and progress bars
Spinners are useful to indicate your users that a content is loading.
They are working with our color palette. To change a spinner color, just use our text-color classes
.text- followed by a color from the
You can create spinners of different sizes by adding
.spinner-large classes to the spinner container.
Rainbow option on spinners
You can create a rainbow effect on your spinner. To create it, add the
.spinner-rainbow class to the spinner container.
.spinner-text class allows you to add a little text inside the spinner.
Progress bars are useful to show a loading progression.
They are working with our color palette.
You can create progress bars of different sizes by adding
You can show the percentage text by writing it inside of the progress bar.
.progress-indeterminate class on your progress container will create an infinite
effect on it.
Rainbow option on progress bar
You can create a rainbow effect on your indeterminate progress bar. To create it, add the
.progress-rainbow class to the progress bar div.
|CSS Variable||Default value||Description|
||#CBD9E0||Progress bar background color.|