原生 css 实现进度条

方案一：通过data控制它的样式 

1. 首先搭建dom结构

                            

                                

                                    {{ item.Voltage }}
                                    {{ item.count }}
                                
                                

                                    
 
                                        
  
                                        
                                        
 
                                            
                                        
                                    
                                
                            

2. css样式如下：

                        .home-left-top-bar {
                            height: 40px;
                            width: 510px;
                            position: relative;
                            .precess{ // 进度条的背景颜色
                                width: 100%;
                                height: 8px;
                                border-radius: 15px;
                                background-color: #00303d;
                                transform: translateY(16px);
                                display: flex;
                                .left {
                                    /*进度条的颜色*/
                                    height: 8px;
                                    width: 50%; // 控制进度条的位置
                                    border-radius: 15px;
                                }
                                .bar {
                                    /*小圆环的颜色*/
                                    width: 16px;
                                    height: 16px;
                                    border-radius: 50%;
                                    transform:translate(-2px, -4px);
                                }
                            }
                        }

3. 通过数据控制进度条的样式

            PowerAAccessbar: {
                "10kv":{
                    Voltage: "10kv",
                    count: "12个",
                    barColor:"#00c9ff", // 控制小圆点的颜色
                    background:"linear-gradient(90deg, rgba(0, 201, 255, 0) 0%, #00c9ff 100%)", //控制进度条的颜色
                    width:"90%"// 控制进度条的位置
                },
                "35kv":{
                    Voltage: "35kv",
                    count: "8个",
                    barColor:"#0C6CE0",
                    background:"linear-gradient(117deg, rgba(12, 108, 224, 0) 0%, #0C6CE0 100%)",
                    width:"60%"
                },
                "5kv":{
                    Voltage: "5kv",
                    count: "5个",
                    barColor:"#FF942C",
                    background:"linear-gradient(117deg, rgba(255, 148, 44, 0) 0%, #FF942C 100%)",
                    width:"50%"
                },
            },

4. 效果：

方案二：通过js控制进度条

 html部分

    

        

            
50%
        
    

css部分

 js 部分

效果图： 

 

详细的进度条介绍:N 种仅仅使用 HTML/CSS 实现各类进度条的方式 - ChokCoco - 博客园