SOURCE

<h2>条形进度条，最好实现的</h2>
<div class="bar-progress">
    <div class="bar-progress-1">
        <div class="progress">
            <span class="bar"></span>
        </div>
        <span class="num">10%</span>
    </div>
    <div class="bar-progress-2">
        <div class="progress">
            <span class="bar"></span>
        </div>
        <span class="num">35%</span>
    </div>
    <div class="bar-progress-3">
        <div class="progress">
            <span class="bar"></span>
        </div>
        <span class="num">10%</span>
    </div>
    <div class="bar-progress-4">
        <progress max="100" value="70"> 70% </progress>
    </div>
</div>

<h2>环形进度条</h2>

body{
    background-color: #fff;
}

.bar-progress-1{
    display: flex;
    margin-bottom: 10px;
    .progress{
        height: 20px;
        border-radius: 10px;
        background-color:#f5f5f5;
        width: 500px;
        display: flex;

        .bar{
            width: 10%;
            height: 100%;
            background-color: #c00;
            border-radius: 10px;
        }
    }
    .num{
        margin-left: 10px;
    }
}

.bar-progress-2{
    display: flex;
    margin-bottom: 10px;
    .progress{
        height: 20px;
        border-radius: 10px;
        background-color:#f5f5f5;
        width: 500px;
        display: flex;

        .bar{
            width: 35%;
            height: 100%;
            background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
            background-size: 1em 1em;
            background-color: #00c;
            border-radius: 10px;
        }
    }
    .num{
        margin-left: 10px;
    }
}
@keyframes progress-bar-stripes {
    0% { 
        background-position-x: 1em; 
    }
}

.bar-progress-3{
    display: flex;
    margin-bottom: 10px;
    .progress{
        height: 20px;
        border-radius: 10px;
        background-color:#f5f5f5;
        width: 500px;
        display: flex;

        .bar{
            width: 35%;
            height: 100%;
            background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
            background-size: 1em 1em;
            background-color: rgb(135, 206, 5);
            border-radius: 10px;
            animation: 1s linear infinite progress-bar-stripes;
        }
    }
    .num{
        margin-left: 10px;
    }
}