Open In App

Materialize CSS Preloader

Improve
Improve
Like Article
Like
Save
Share
Report

Preloaders are used for providing symbolic messages that tells users about the website status like “Loading” or “Not crashed”. Materialize provides CSS classes to give various types of preloaders. The following are the available classes provided by Materialize CSS.

Linear: It identifies an element as a progress bar class required for “div” element. There are two different types of linear progress bars.

  • Determinate: It provides basic materialize function to progress indicator.
    <div class="progress">
        <div class="determinate" style="width: 70%"></div>
    </div>
    
  • Indeterminate: It provides animation to progress indicator.
    <div class="progress">
        <div class="indeterminate"></div>
    </div>
    
  • Circular: In circular, there are 4 colors and 3 sizes. The spinner should be nested in a “div” preloader-wrapper. The default size is medium, but big or small classes can be added to adjust the size accordingly. You can add the classes spinner-red-only, spinner-blue-only, spinner-yellow-only and spinner-green-only , if you want to show one color.

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

    Circular Flashing Colors: They are same as circular except it uses all four colors provided by materialize during its display.

    <div class="preloader-wrapper big active">
        <div class="spinner-layer spinner-blue">
            <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 class="spinner-layer spinner-red">
            <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 class="spinner-layer spinner-yellow">
            <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 class="spinner-layer spinner-green">
            <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>
    

    Example: The following example shows the use of all the above preloader classes.

    HTML




    <!DOCTYPE html>
    <html>
      
    <head>
      <!--Import Google Icon Font-->
      <link href=
        rel="stylesheet">
      
      <!-- Compiled and minified CSS -->
      <link rel="stylesheet" href=
      
      <script type="text/javascript" src=
      </script>
      
      <!-- Compiled and minified JavaScript -->
      <script src=
      </script>
        
      <!--Let browser know website is
          optimized for mobile-->
      <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
    </head>
      
    <body>
      <!-- Preloader determinate -->
      <div class="card-panel">
        <h3>Linear Determinate</h3>
        <div class="progress blue lighten-4">
          <div class="determinate green" style="width: 70%"></div>
        </div>
      </div>
      <!-- Preloader Indeterminate -->
      <div class="card-panel">
        <h3>Linear Indeterminate</h3>
        <div class="progress yellow lighten-3">
          <div class="indeterminate green" style="width: 70%"></div>
        </div>
      </div>
      <!-- Preloader Circular -->
      <div class="card-panel">
        <h3>Circular Preloader</h3>
        <div class="row">
          <div class="col s4">
            <div class="preloader-wrapper active">
              <div class="spinner-layer spinner-green-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 class="col s4">
            <div class="preloader-wrapper big active">
              <div class="spinner-layer spinner-green-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 class="col s4">
            <div class="preloader-wrapper small active">
              <div class="spinner-layer spinner-green-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>
      <!-- Preloader circular Flashing colors -->
      
      <div class="card-panel">
        <h3>Preloader Circular Flashing Colors</h3>
        <div class="row">
          <div class="col s4">
            <div class="preloader-wrapper active">
              <!-- spinner-blue -->
              <div class="spinner-layer spinner-blue">
                <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>
              <!-- spinner-red -->
              <div class="spinner-layer spinner-red">
                <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>
              <!-- spinner-yellow -->
              <div class="spinner-layer spinner-yellow">
                <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>
              <!-- spinner-green -->
              <div class="spinner-layer spinner-green">
                <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 class="col s4">
            <div class="preloader-wrapper big active">
              <!-- spinner-blue -->
              <div class="spinner-layer spinner-blue">
                <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>
              <!-- spinner-red -->
              <div class="spinner-layer spinner-red">
                <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>
              <!-- spinner-yellow -->
              <div class="spinner-layer spinner-yellow">
                <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>
              <!-- spinner-green -->
              <div class="spinner-layer spinner-green">
                <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 class="col s4">
            <div class="preloader-wrapper small active">
              <!-- spinner-blue -->
              <div class="spinner-layer spinner-blue">
                <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>
              <!-- spinner-red -->
              <div class="spinner-layer spinner-red">
                <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>
              <!-- spinner-yellow -->
              <div class="spinner-layer spinner-yellow">
                <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>
              <!-- spinner-green -->
              <div class="spinner-layer spinner-green">
                <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>
    </body>
      
    </html>

    
    

    Output:



    Last Updated : 16 May, 2022
    Like Article
    Save Article
    Previous
    Next
    Share your thoughts in the comments
Similar Reads