Materialize CSS Preloader
Materialize CSS preloader or spinner is used when content takes a long time to load the content. After loading the content, the preloader is removed from the page.
There are different types of materialize preloader such as Linear, Circular, Circular Flashing Colors.
Linear Preloader
Followings are the liner preloaders.
- Determinate
- Indeterminate
General Syntax
<div class="progress">
<div class="determinate" style="width: 70%;"></div>
</div>
Source Code
<div class="progress" style="height: 20px;">
<div class="determinate" style="width: 70%;"></div>
</div>
Source Code: Output
Indeterminate
General Syntax
<div class="progress">
<div class="indeterminate" style="width: 70%;"></div>
</div>
Source Code
<div class="progress" style="height: 20px;">
<div class="indeterminate" style="width: 70%;"></div>
</div>
Source Code: Output
Circular Preloader
The circular preloader is nested inside the container having class .preloader-wrapper.Please keep in mind that the default size of the circular preloader is medium but it can be changed either small or big using .small & .big correspondingly.To change the color of the preloader, use spinner-red-only, spinner-blue-only, spinner-yellow-only , and spinner-green-only.
General Syntax
<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>
Source Code
<div class="container">
<div class="row">
<div class="col s12 m12 l12">
<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>
</div>
Source Code: Output
Web Tutorials
