原生 css 实现进度条

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

1. 首先搭建dom结构

                            <div
                                class="home-left-top-content-div"
                                v-for="(item, index) in PowerAAccessbar"
                                :key="index"
                            >
                                <p class="home-left-top-desc">
                                    <span style="float: left">{{ item.Voltage }}</span>
                                    <span style="float: right">{{ item.count }}</span>
                                </p>
                                <div class="home-left-top-bar">
                                    <div class="precess" > <!--进度条背景-->
                                        <div class="left" :style="{width:item.width,background:item.background}">  <!--进度条-->
                                        </div>
                                        <div class="bar" :style="{background:item.barColor}"> 
                                            <!--控制小圆点的颜色-->
                                        </div>
                                    </div>
                                </div>
                            </div>

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部分

    <div style="width:500px;height:20px">
        <div class="progress">
            <div class="progress-bar" style="width: 50%;">50%</div>
        </div>
    </div>

css部分

<style>
    .progress{
        height: 36px; /*进度条轨道的高度*/
        border: 1px solid #eaa267; 
        background: #f1f3f4; /*轨道的颜色*/
        box-shadow: none;
        overflow: hidden;
        border-radius: 50px !important;
    }
    .progress-bar{
        /* width: 50%; 控制进度条的进度 */
        background: linear-gradient(to right, rgb(245, 209, 114) 0%, rgb(234, 162, 103) 100%);
        height: 36px;
        border-radius: 30px !important;
        /* 设置的文字的样式 */
        font-size: 14px;
        line-height: 36px;
        color: #fff;
        text-align: center;
    }
</style>

 js 部分

<script>
    var progressBar = document.querySelector('.progress-bar')
    console.log(progressBar);
    progressBar.style.width='10%' // 控制css进度条的进度
    progressBar.innerHTML = '10%' // 修改显示的进度值
</script>

效果图： 

 

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