语义 UI 进度类型

Semantic UI是一个开源框架，它有一些预定义的类，使我们的网站看起来漂亮且响应迅速。它类似于引导程序，因为它具有预定义的类供使用。它使用 CSS 和 jQuery 来构建界面。它有一些不同类型的元素可以帮助我们创建一个漂亮的网站。

进度条用于显示在总工作中完成的工作量，它用于使用进度条显示任务的进度。语义 UI 进度类型用于使用不同类型的进度条显示进度。

在本文中，我们将讨论语义 UI 进度类型。

语义 UI 进度类型：

• 标准：是标准的进度条。
• 指示：是直观指示的进度条。

句法：

  

       ....
  
  ...

示例 1：以下代码演示了 Semantic-UI标准进度类型。

HTML

  Semantic-UI Progress Types
  
  
  
  
  
  

  

    
        
          GeeksforGeeks
        
        
          Semantic-UI Progress Types
        
    
  
    
        
          
        
        
          Standard Progress
        
    
  
    -
    +
  
    
        $('.ui.button.btn1').on('click', function () {
          $('.progress').progress('decrement');
        });
        $('.ui.button.btn2').on('click', function () {
          $('.progress').progress('increment');
        });
    

输出：

示例 2：以下代码演示了 Semantic-UI指示进度类型。

HTML

  Semantic-UI Progress Types
  
  
  
  
  
  

  

    
        
          GeeksforGeeks
        
         Semantic-UI Progress Types    
    
  
    
        
        
          Indicating Progress
        
    
  
    -
    +
  
     
        $('.ui.button.btn1').on('click', function () {
          $('.progress').progress('decrement');
        });
        $('.ui.button.btn2').on('click', function () {
          $('.progress').progress('increment');
        });
     

输出：

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