Materialise - Preloader

Materialise fournit diverses classes CSS pour appliquer diverses améliorations visuelles et comportementales prédéfinies pour afficher divers types de préchargeurs ou de barres de progression. Le tableau suivant mentionne les classes disponibles et leurs effets.

Sr.No. Nom et description de la classe
1

progress

Identifie un élément en tant que composant de progression. Requis pour l'élément div.
2

determinate

Définit le comportement de base de Materialise sur l'indicateur de progression.
3

indeterminate

Définit l'animation en indicateur de progression.

Exemple

Voici un exemple d'utilisation des préchargeurs de différentes manières.

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>

Résultat

Vérifiez le résultat.