HTML CSS 进度条

1 原生HTML标签

• ：显示已知范围的标量值或者分数值
• ：显示一项任务的完成进度，通常情况下，该元素都显示为一个进度条

1.1 

    
        
    
    
        
 
            进度：
            
        
    

min、max、value 分别表示最大值，最小值与当前值。

1.2 

    
        
    
    
        
 
            进度：
            
        
    

max 描述 progress 元素所表示的任务一共需要完成多少工作量，value 属性用来指定该进度条已完成的工作量。

1.3 区别

主要是语义上的差别。

• ：表示已知范围内的标量测量值或分数值
• ：表示任务的完成进度

比如，一个需求当前的完成度，应该使用 ，而如果要展示汽车仪表盘当前的速度值，应该使用 meter。

1.4 存在问题

• 无法有效的修改  和  标签的样式，比如背景色，进度前景色等。并且，默认样式在不同浏览器之间不一致。
• 无法添加动画效果、交互效果

    
        
    
    
        
 
            进度：
            
        
    

chrome:

    
        
    
    
        
 
            进度：
            
        
    

chrome:

2 HTML标签+CSS

思路：使用背景色配合百分比

2.1 双标签

    


    

        进度：
        

            
70%
        
    

优点：

• 进度具体数值可以直接传参给width属性
• 可以自定义样式，比如前景色，背景色，渐变
• 可以自定义动画和交互效果

2.2 单标签

使用渐变属性

    



    

        进度：
        
70%
    

如果不需要进度条渐变，只需要指定渐变颜色为同一颜色即可

    



    

        进度：
        
70%
    

使用变量：

    



    

        进度：
        
70%
    

存在问题：CSS中，渐变（比如 linear-gradinet、radial-gradient、conic-gradient）不支持过渡变换的，因此.progress增加transition，不会有过渡动画效果。

解决方案：使用CSS@property

    



    

        进度：
        
70%
    

优点：

• 进度具体数值可以直接传参给--progress变量
• 可以自定义样式，比如前景色，背景色，渐变
• 可以自定义动画和交互效果

2.3 圆弧进度条

思路：圆锥渐变 conic-gradient()

    


    

        进度：
        
70%
    

中间增加mask: 方法一(仅适用纯色背景)：

    


    

        进度：
        
70%
    

    


    

        进度：
        

    

方法二(可适用渐变背景)：

    


    

        进度：
        

    

存在问题：
进度百分比不是类似于 0°、90°、180°、270°、360° 这类数字时，使用圆锥渐变时，不同颜色间的衔接处会有明显的锯齿。

解决办法：
在衔接处空余出一些距离让其应用渐变

    


    

        进度：
        

    

注意对比内圈和上图的不同，颗粒感降低，可以根据需要继续调整