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

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

Indeterminate

Adding the .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.

Styling