Materialize Preloader

Materialize Preloader : Loaders are basically used to indicate that some background process/activity is happening. Materialize provides various loaders such as linear and circular with various options to customize it. Here in this tutorial we are going to explain how to create loaders in Materialize. You can also use our online editor to edit and run the code online.

Materialize Preloader | Loading | Loader Example

There are following types of Preloader –

• 1. Linear
• 2. Circular

Now let us go one by one to understand the loaders with example & demo –

Linear Progress Bar

There are basically two types of Linear Progress Bar-

• 1. Determinate
• 2. Indeterminate

Determinate

Create a div with class=”determinate”, add percentage of progress by adding style width(such as style=”width:60%”) and wrap this div by a div with class=”progress”.

<div class="progress">
      <div class="determinate amp-wp-inline-7688ad84a365c45101a398cade05dd28"></div>
</div>

If you run the above example it will produce the output something like this –

Indeterminate

Create a div with class=”indeterminate” and wrap this div by a div with class=”progress”.

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

Circular Loader | Loading

Materialize provides various types of Circular Loaders of different-different colors and sizes. Let us create a simple circular loader in materialize –

  
 <div class="preloader-wrapper active">
    <div class="spinner-layer">
      <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>

If you run the above example it will produce the output something like this –

More Examples coming soon..