Materialize CSS Preloader

Materialize CSS preloader 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 preloader such as Linear, Circular, Circular Flashing Colors.

Linear Preloader

Followings are the liner preloaders.

  1. Determinate
  2. Indeterminate

General Syntax

      <div class="progress">
  <div class="determinate" style="width: 70%;"></div>
</div>
    
Try it now

Source Code

          <div class="progress" style="height: 20px;">
  <div class="determinate" style="width: 70%;"></div>
</div>
        
Try it now

Source Code: Output

Indeterminate

General Syntax

      <div class="progress">
  <div class="indeterminate" style="width: 70%;"></div>
</div>
    
Try it now

Source Code

          <div class="progress" style="height: 20px;">
  <div class="indeterminate" style="width: 70%;"></div>
</div>
        
Try it now

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>
    
Try it now

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>
        
Try it now

Source Code: Output

Web Tutorials

Materialize CSS Preloader
Html Tutorial HTML
Javascript Tutorial JAVASCRIPT
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4