语义 UI 图标集微调器

Semantic UI是一个基于less和jQuery的UI框架。它用于制作美观且响应迅速的网站。在本文中，我们将看到 Semantic UI 提供的Spinners 图标集。 Spinners 图标集中共有 15 个图标，可用于告诉用户后台正在加载某些内容。

Semantic-UI 图标集 Spinner 类：

• asterisk：这个类用于显示星号图标。
• 证书：该类用于显示证书图标。
• 圆形缺口：这些类用于显示缺口圆形图标。
• cog：此类用于显示 cog 图标。
• compass：该类用于显示指南针图标。
• 罗盘大纲：这些类用于显示带轮廓的罗盘图标。
• crosshairs：该类用于显示十字准线图标。
• life ring：这些类用于显示生命环图标。
• life ring outline：这些类用于显示轮廓的生命环图标。
• 雪花：这个类用于显示雪花图标。
• 雪花轮廓：这些类用于显示轮廓雪花图标。
• spinner：此类用于显示微调器图标。
• sun：该类用于显示太阳图标。
• 太阳轮廓：这些类用于显示轮廓太阳图标。
• sync：此类用于显示同步图标。

句法：

示例 1：下面的示例说明了上面列出的所有 15 个图标的使用。

HTML

  

    Semantic-UI Icon Set Spinners
    
    
    
    
    
    
  
    
        .ui.container {
            text-align: center;
        }
  
        h4 {
            margin-top: 0px;
        }
  
        .ui.grid {
            margin-top: 30px !important;
        }
    

  

    
        
            GeeksforGeeks
            Semantic UI - Icon Set Spinners
        
        
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
        
    

  

输出：

语义 UI – 图标集微调器

示例 2：下面的示例显示了使用不同颜色的 Spinners Set 图标。

HTML

  

    Semantic-UI Icon Set Spinners
    
    
    
    
    
    
  
    
        .ui.container {
            text-align: center;
        }
  
        h4 {
            margin-top: 0px;
        }
  
        .ui.grid {
            margin-top: 30px !important;
        }
    

  

    
        
            GeeksforGeeks
            Semantic UI - Icon Set Spinners 
                with Colors Variation
        
        
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
        
    

  

输出：

语义 UI – 具有颜色变化的图标集微调器

示例 3：下面的示例显示了使用 Spinners 设置具有大小变化的图标。

HTML

  

    Semantic-UI Icon Set Spinners
    
    
    
    
    
    
  
    
        .ui.container {
            text-align: center;
        }
  
        h4 {
            margin-top: 0px;
        }
  
        .ui.grid {
            margin-top: 30px !important;
        }
    

  

    
        
            GeeksforGeeks
            Semantic UI - Icon Set Spinners
                with Sizes Variation
        
        
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
        
    

  

输出：

语义 UI - 具有大小变化的图标集微调器

参考： https://semantic-ui.com/elements/icon.html#spinners