The Materialize provides various CSS classes to apply various
predefined visual and behavioral enhancements to the display various
types of preloaders or progress bars. The below table mentions the
available classes and their effects.
Following are the examples of using preloaders in different ways.
| S.N. | Class Name & Description |
|---|---|
| 1 | progress Identifies element as an progress component. Required for div element. |
| 2 | determinate Sets basic Materialize behavior to progress indicator. |
| 3 | indeterminate Sets animation to progress indicator. |
Example
materialize_preloader.htm<html> <head> <title>The Materialize Preloader Example</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css"> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script> </head> <body class="container"> <h4>Default Preloader</h4> <div class="progress"> <div class="determinate" style="width: 50%"></div> </div> <h4>Indeterminate Preloader</h4> <div class="progress"> <div class="indeterminate"></div> </div> <h4>Circular Preloader</h4> <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> </body> </html>
No comments:
Post a Comment