CSS stroke-dashoffset与彩色圆环进度条效果实例页面

展示

加载进度：

//zxx: IE浏览器也支持

代码

HTML：

<svg width="440" height="440" viewBox="0 0 440 440">
    <defs>
        <linearGradient x1="1" y1="0" x2="0" y2="0" id="gradient">
            <stop offset="0%" stop-color="#e52c5c"></stop>
            <stop offset="100%" stop-color="#ab5aea"></stop>
        </linearGradient>
    </defs>
    <circle cx="220" cy="220" r="170" class="circle-track"></circle>
    <circle cx="220" cy="220" r="170" transform="rotate(-90 220 220)" class="circle-bar"></circle>
    <text class="text" x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">0%</text>
</svg>

CSS：

circle {
    stroke-width: 50px;
    fill: none;
    stroke-dasharray: 1069px;
}
.circle-track {
    stroke: #f0f1f5;
}
.circle-bar {
    stroke-dashoffset: 1069px;
    stroke: url(#gradient);
}
.text {
    font-size: 50px;
}