| نام کلاس | توضیحات |
|---|---|
| progress | برای ساخت یک div به عنوان نوار لودر (progress bars) مورد نیاز است. |
| determinate | مشخصات اولیه برای ساخت نوار منوی قابل پیشرفت را ایجاد می کند. |
| indeterminate | انیمیشن را برای یک نوار لودر ایجاد می کند. |
مثال
مثال زیر به ساخت انواع نوار منو های مختلف را نشان می دهد.
<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>
خروجی بصورت زیر است:
