December 26, 2016

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”.

Determinate Progress Bar Example:

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

Try it »

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”.

Indeterminate Progress Bar Example:

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

Try it »

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 –

Materialize Circular Loading Example

  
 <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>

Try it »

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

Learn More

Let us have some More example and demo about the Materialize Loaders.

More Examples coming soon..

User Ans/Comments

Greatfull article!

Materialize Preloader