Google News
logo
Material Design - Interview Questions
What is Materialize Preloader? With Example
Materialize CSS Preloader is used when you have content that will take a long time to load. For this reason we provide a number activity + progress indicators. The main preloaders are : Linear, Circular, Circular Flashing Colors.

Circular : The circular spinners should be nested in a preloader-wrapper div. The default size is medium, but you can add the classes big or small to adjust the size accordingly. You can add the classes spinner-red-only, spinner-blue-only, spinner-yellow-only and spinner-green-only.

<div class="row">
    <div class="container">

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