Materialize CSS Preloader is used when you have content that will take a long time to load. For this reason we provide a number activity + progress indicators. The main preloaders are : Linear, Circular, Circular Flashing Colors.
Circular : The circular spinners should be nested in a
preloader-wrapper
div. The default size is medium, but you can add the classes
big
or
small
to adjust the size accordingly. You can add the classes
spinner-red-only, spinner-blue-only, spinner-yellow-only
and
spinner-green-only
.
<div class="row">
<div class="container">
<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>
</div>​