Semantic-UI Progress 标准类型

Semantic UI 是一个开源开发框架，它提供了预定义的类，使我们的网站看起来漂亮、令人惊叹且响应迅速。它类似于具有预定义类的 Bootstrap。它使用 jQuery 和 CSS 来创建接口。它也可以像 bootstrap 一样通过 CDN 直接使用。

进度条指示完成的工作在总工作中的进度。它直观地指示使用条形完成的工作量。在本文中，我们将了解进度标准类型。此标准类型在进度条上指示工作进度。

Semantic-UI Progress 标准类型类：

• progress：该类用于指示工作的进度。
• 指示：该类用于指示任何工作的当前进度水平。

句法：

    

        
...
    

示例 1：下面是演示进度标准类型的代码。

HTML

  

    
        Semantic-UI Progress Standard Type
    
  
    
  
    
    
  
    
    

  

    
        GeeksforGeeks
        
            Semantic-UI Progress Standard Type
        
    
  
    
        
            
        
        Uploading Files
    
  
    Increase
    Decrease
  
    
        $('.ui.button.green').on('click', function () {
            $('.progress').progress('increment');
        });
  
        $('.ui.button.red').on('click', function () {
            $('.progress').progress('decrement');
        });
    

  

输出：

Semantic-UI Progress 标准类型

示例 2：下面是使用指示类演示进度标准类型的代码。

HTML

  

    
        Semantic-UI Progress Standard Type
    
  
    
  
    
    
  
    
    

  

    
        GeeksforGeeks
        
            Semantic-UI Progress Standard Type
        
    
  
    
        
        Progressing...
    
  
    Increase
    Decrease
  
    
        $('.ui.button.green').on('click', function () {
            $('.progress').progress('increment');
        });
  
        $('.ui.button.red').on('click', function () {
            $('.progress').progress('decrement');
        });
    

  

输出：

Semantic-UI Progress 标准类型

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