Учебники

Материализация — Preloader

Июль 26, 2018

Materialize предоставляет различные классы CSS для применения различных предопределенных визуальных и поведенческих улучшений для отображения различных типов предварительных загрузчиков или индикаторов выполнения. В следующей таблице указаны доступные классы и их эффекты.

Sr.No. Имя класса и описание
1

прогресс

Определяет элемент как компонент прогресса. Требуется для элемента div.

2

детерминированный

Устанавливает базовое поведение Materialize для индикатора прогресса.

3

неопределенный

Устанавливает анимацию на индикатор прогресса.

прогресс

Определяет элемент как компонент прогресса. Требуется для элемента div.

детерминированный

Устанавливает базовое поведение Materialize для индикатора прогресса.

неопределенный

Устанавливает анимацию на индикатор прогресса.

пример

Ниже приведен пример использования предварительных загрузчиков различными способами.

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>

Результат

Проверьте результат.

47
Share: