Bootstrap5 |进步

Bootstrap 5是Bootstrap的最新主要发行版，他们在其中改进了UI并进行了各种更改。进度条用于在计算机上显示进程的进度。进度条显示完成了多少流程以及还剩下多少。您可以使用预定义的引导程序类在网页上添加进度条。 Bootstrap提供了多种类型的进度条。进度组件由两个HTML元素构建，这些元素使用CSS设置宽度和一些属性。它不使用HTML5 元素，从而可以堆叠进度条，设置其动画效果以及在其上放置文本标签。它使用.progress作为包装器来指示进度条的最大值，并使用内部.progress-bar指示到目前为止的进度。

句法：

 Contents... 

例子：

    
        
        
        
        
    
  
    
        
            
                GeeksforGeeks
            
            
                
            
        
    

输出：

进度条的高度：我们可以使用CSS属性更改进度条的高度。进度的默认高度为16像素。进度高度和进度栏容器必须相同。
例子：

    
        
        
        
        
    
  
    
        
            
                GeeksforGeeks
            
            
                
              
            
        
    

输出：

带标签的进度条：带标签的进度条用于在进度栏中显示文本，以显示任务完成百分比。
例子：

    
        
        
        
      
        
      
    
  
    
        
            
                GeeksforGeeks
            
            
                
                    75%
                
            
        
    

输出：

彩色进度条：使用Bootstrap 4上下文背景类设置进度条的颜色。进度栏的默认颜色为蓝色。例子：

    
        
        
        
      
        
      
    
  
    
        
            
                GeeksforGeeks
            
            
                
                    50%
                
            
            
  
            
                
                    60%
                
            
            
  
            
                
                    80%
                
            
            
  
            
                
                    90%
                
            
            
  
            
                
                    100%
                
            
            
        
    

输出：

条纹进度条： .progress-bar-striped类用于向进度条添加条纹。使用.progress-bar和.progress-bar-striped类的组合来创建条状进度条。使用Bootstrap 4上下文背景类设置进度条的颜色。例子：

    
        
        
        
      
        
      
    
  
    
        
            
                GeeksforGeeks
            
            
                60%
            
            
  
            
                70%
            
            
  
            
                80%
            
            
  
            
                90%
            
            
  
            
                100%
            
            
        
    

输出：

动画进度条： .progress-bar-animated类用于创建动画进度条。使用.progress-bar ， .progress-bar-striped和.progress-bar-animated的组合来创建动画进度条。
例子：

    
  
        
        
        
        
      
    
  
    
        
            
                GeeksforGeeks
            
            
                
                  60%
            
            
  
            
                
                  70%
            
            
  
            
                
                  80%
            
            
  
            
                
                  90%
            
            
  
            
                100%
            
            
        
    

输出：

多个进度条：可以堆叠多个进度条以显示不同颜色的进度条。
例子：

    
        
        
        
        
      
    
  
    
        
            
                GeeksforGeeks
            
            
                
                    50%
                
  
                
                    25%
                
  
                
                    10%
                
  
                
                    5%
                
            
        
    

输出：