Loading

Spinners

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 .txt- followed by a color from the palette.
You can create spinners of different sizes by adding .small or .large classes to the spinner container.

Rainbow option on spinners

You can create a rainbow effect on your spinner. To create it, add the .rainbow class to the spinner container.

Spinner text

The .spinner-txt class allows you to add a little text inside the spinner.

Progress bars

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 .small or .large classes.
You can show the percentage text by writing it inside of the progress bar.

Indeterminate

Adding the .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 .rainbow class to the progress bar div.