Materialize CSS Preloader

Materialize CSS Preloader

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 preloaders such as linear, circular, and circular flashing colors.

Linear Preloader

There are the following types of linear preloaders.

  • Determinate
  • Indeterminate

Determinate

Follow the following steps to create a linear progress bar.

  • Assign the .progress class to the preloader container base class.
  • Assign the .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>    
Try It Now

Source Code

Download
<div class="progress" style="height:20px;">
  <div class="determinate" style="width: 80%;"></div>
</div>    
Try it yourself

Source Code : Output

Indeterminate

The followings are the steps to create an indeterminate preloader.

  • Assign the .progress class to the preloader container base class.
  • Assign the .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>    
Try It Now

Source Code

Download
<div class="progress" style="height: 20px;">
  <div class="indeterminate" style="width: 90%">
  </div>
</div>    
Try it yourself

Source Code : Output

Circular Preloader

Circular preloading moves continuously in a circular shape.

Follow the following basic steps to create the circular preloader.

  • Place the circular preloader inside the container & assign the .preloader-wrapper class.
  • 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.
  • To change the color of the preloader, use spinner-red-only, spinner-blue-only, spinner-yellow-only, and spinner-green-only.

Source Code

Download
<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>    
Try it yourself

Source Code : Output

Web Tutorials

Html Tutorial HTML
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4
Materialize CSS Tutorial MATERIALIZE CSS