If you have content that will take a long time to load,you should give the user feedback. For this reason we provide a number activity+progress indicators.

Linear

<div class="progress"><div class="determinate" style="width: 70%"></div></div>

Indeterminate Linear

<div class="progress"><div class="indeterminate"></div></div>

Circular

There are 4 colors and 3 sizes of circular spinners. The spinner should be nested in a preloader-wrapperdiv. The default size is medium,but you can add the classes bigor smallto adjust the size accordingly. You can add the classes spinner-red-only,spinner-blue-only,spinner-yellow-onlyand spinner-green-only. You can also leave this class as just spinner-layerand it will be set to the $spinner-default-colorvariable in our variables.scss file.

Simple Circular

<div class="preloader-wrapper big active"><div class="spinner-layer spinner-blue-only"><div class="circle-clipper left"><div class="circle"></div></div><div class="gap-patch"><div class="circle"></div></div><div class="circle-clipper right"><div class="circle"></div></div></div></div><div class="preloader-wrapper active"><div class="spinner-layer spinner-red-only"><div class="circle-clipper left"><div class="circle"></div></div><div class="gap-patch"><div class="circle"></div></div><div class="circle-clipper right"><div class="circle"></div></div></div></div><div class="preloader-wrapper small active"><div class="spinner-layer spinner-green-only"><div class="circle-clipper left"><div class="circle"></div></div><div class="gap-patch"><div class="circle"></div></div><div class="circle-clipper right"><div class="circle"></div></div></div></div>

Circular Flashing Colors

Big

Normal

Small

<div class="preloader-wrapper big active"><div class="spinner-layer spinner-blue"><div class="circle-clipper left"><div class="circle"></div></div><div class="gap-patch"><div class="circle"></div></div><div class="circle-clipper right"><div class="circle"></div></div></div><div class="spinner-layer spinner-red"><div class="circle-clipper left"><div class="circle"></div></div><div class="gap-patch"><div class="circle"></div></div><div class="circle-clipper right"><div class="circle"></div></div></div><div class="spinner-layer spinner-yellow"><div class="circle-clipper left"><div class="circle"></div></div><div class="gap-patch"><div class="circle"></div></div><div class="circle-clipper right"><div class="circle"></div></div></div><div class="spinner-layer spinner-green"><div class="circle-clipper left"><div class="circle"></div></div><div class="gap-patch"><div class="circle"></div></div><div class="circle-clipper right"><div class="circle"></div></div></div></div>
add