使用CSS的多色进度条

Question

I want to create a multicolor progress bar please help me to code. when progress less than 50 it will show red when progress is >50 and <90 it will show green and from 90 to 100 it show blue, how to do it??

Answer 1

您需要为进度条创建一个div，然后只需在progressbar div中添加div。 `

<div class="bar">
    <div class="fifty">
        <p>50%</p>
    </div>
    <div class="twentyfive">
        <p>25%</p>
    </div>
    <div class="ten">
        <p>10%</p>
    </div>
</div>

`

CSS可能是这样的： `

    .bar {
        width: 100%;
        height: 30px;
        border-radius: 10px;
        background-color: #b3b3b3;
        color: white;
        text-align: center;
    }

    .fifty {
        width: 50%;
        height: 100%;
        background-color: green;
        float: left;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
    }

    .twentyfive {
        width: 25%;
        height: 100%;
        background-color: orange;
        float: left;
    }

    .ten {
        width: 10%;
        height: 100%;
        background-color: red;
        float: left;
    }

`