Materialize CSS preloader comes into action when the web page content takes a long time to load the content. Whenever the content is loaded properly, then the preloader is removed from the web page.
There are different types of Materialize preloaders such as linear, circular, and circular flashing colors.
There are the following types of linear preloaders.
Follow the following steps to create a linear progress bar.
.progress
class to the preloader container base class.
.determinate
class to the child element of the <div>
having class .progress
.
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: 80%;"></div>
</div>
The followings are the steps to create an indeterminate preloader.
.progress
class to the preloader container base class.
.indeterminate
class to the child element of the <div>
having class .progress
.
General Syntax
<div class="progress" style="height: 20px;">
<div class="indeterminate" style="width: 90%"></div>
</div>
Source Code
<div class="progress" style="height: 20px;">
<div class="indeterminate" style="width: 90%">
</div>
</div>
Circular preloading moves continuously in a circular shape.
Follow the following basic steps to create the circular preloader.
.preloader-wrapper
class..small
& .big
.
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>