Semantic-UI 进度内容

Semantic UI是一个开源框架，它使用 CSS 和 jQuery 来构建出色的用户界面。它与使用的引导程序相同，并且有很多不同的元素可用于使您的网站看起来更令人惊叹。这个框架最好的部分是它创建了漂亮的响应式布局，因为它包含预构建的语义组件。

进度是我们网站的重要组成部分，因为它向用户显示操作的进度状态。进度组件具有各种属性，例如带有文本值的进度条或带有标签的进度条等。这可以借助 Semantic UI Progress Content 来实现。

语义 UI 进度内容：

• Bar ：它是一个直观地显示活动进度的栏。
• 进度：条形可以包含指示当前进度的文本值。
• 标签：一个栏可以包含一个标签以及直观地显示其进度。

语法：其他两个进度内容类的语法相同，唯一的区别是要更改的类的名称。

  

   ....
  

示例 1：下面的示例将演示 Semantic UI 中的进度内容栏类。

HTML

    

    
        Semantic-UI Progress Bar Content
    
    
    
    
    
    

    

     
     GeeksforGeeks 
    
    Progress Content
    
    
         
       
        
    
        $('#bar').progress();
    

    

输出：

示例 2：下面的示例将演示语义 UI 中的进度内容类。

HTML

    

    
        Semantic-UI Progress Bar Content
    
    
    
    
    
    

    

     
     GeeksforGeeks 
    
    Progress Content
    
    
        
            
  
            
        
      
        
    
        $('#prog').progress();
    
  

输出：

示例 3：下面的示例将演示语义 UI 中的进度内容标签类。

HTML

    

      Semantic-UI Progress Bar Content   
    
    
    
    
    

    

     
     GeeksforGeeks 
    
    Progress Content
    
    
        
             
        
        Uploading
        
        
    
        $('#bar').progress();
    
  

输出：

参考链接： https://semantic-ui.com/modules/progress.html