物化 CSS |预加载器

原文:https://www.geeksforgeeks.org/materialize-css-preloader/

预加载器用于提供符号消息，告知用户网站状态，如“加载”或“未崩溃”。物化提供 CSS 类来提供各种类型的预加载器。以下是物化 CSS 提供的可用类。

Linear: 它将一个元素标识为“div”元素所需的进度条类。有两种不同类型的线性进度条。

  • 确定:为进度指标提供基本物化功能。

    ```html

    ```

  • Indeterminate: It provides animation to progress indicator.

    ```html

    ```

    圆形:圆形中有 4 种颜色，3 种尺寸。微调器应该嵌套在“div”预加载器包装器中。默认尺寸为中，但可增加大或小班相应调整尺寸。如果您想显示一种颜色，可以添加类别仅红色微调器、仅蓝色微调器、仅黄色微调器和仅绿色微调器。

    ```html

    ```

    圆形闪烁颜色:除了在显示时使用物化提供的所有四种颜色外，它们与圆形相同。

    ```html 

    <div class="spinner-layer spinner-red">
    <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 class="spinner-layer spinner-yellow">
    <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 class="spinner-layer spinner-green">
    <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>

    ```

    示例:以下示例显示了上述所有预加载器类的使用。

    超文本标记语言

    ```html <!DOCTYPE html>

         

      

      

         

      

         
        

    Linear Determinate

        
          
        
      
         
        

    Linear Indeterminate

        
          
        
      
         
        

    Circular Preloader

        
          
            
                       
          
          
            
                       
          
          
            
                       
          
        
      
      

        

    Preloader Circular Flashing Colors

        
          
            
                                                                                                    
          
          
            
                                                                                                    
          
          
            
                                                                                                    
          
        
      

    ```

    输出:

版权属于：月萌API www.moonapi.com，转载请注明出处

本文链接：https://moonapi.com/news/8048.html