css 实现一个圆形进度条（不是饼图）

langlingxue

已于 2025-02-18 09:34:26 修改

阅读量505

点赞数 3

文章标签：前端前端框架 javascript css html es6 sass

于 2025-02-18 09:33:56 首次发布

本文链接：https://blog.youkuaiyun.com/langlingxue/article/details/145697351

版权

实现思路

使用 conic-gradient 创建一个环形背景。
使用 clip-path 或 mask 裁剪出进度条的效果。
通过 CSS 变量或 JavaScript 动态控制进度。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圆形进度条</title>
    <style>
        /* 容器 */
        .progress-circle {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            background: conic-gradient(
                #4caf50 0%,
                #4caf50 var(--progress),
                #e0e0e0 var(--progress),
                #e0e0e0 100%
            );
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* 遮罩层，用于显示圆形 */
        .progress-circle::before {
            content: '';
            position: absolute;
            width: 80%;
            height: 80%;
            border-radius: 50%;
            background: white;
        }

        /* 进度文本 */
        .progress-text {
            position: relative;
            font-family: Arial, sans-serif;
            font-size: 24px;
            color: #333;
        }
    </style>
</head>
<body>
    <div class="progress-circle" style="--progress: 60%">
        <div class="progress-text">60%</div>
    </div>
</body>
</html>

代码说明

conic-gradient：

使用 conic-gradient 创建一个环形背景，颜色从绿色 (#4caf50) 到灰色 (#e0e0e0) 渐变。
var(–progress) 是一个 CSS 变量，用于动态控制进度

遮罩层：

使用 ::before 伪元素创建一个白色的遮罩层，遮住中间部分，形成环形效果

进度文本：

使用 .progress-text 显示当前进度值。

动态控制进度：

通过修改 –progress 变量的值（例如 60%），可以动态调整进度条的显示。

动态更新进度
如果需要动态更新进度，可以通过 JavaScript 修改 --progress 变量：

const progressCircle = document.querySelector('.progress-circle');
const progressText = document.querySelector('.progress-text');

function updateProgress(percent) {
    progressCircle.style.setProperty('--progress', `${percent}%`);
    progressText.textContent = `${percent}%`;
}

// 示例：更新进度为 75%
updateProgress(75);

效果

进度条是一个环形，绿色部分表示进度，灰色部分表示剩余部分。
进度值可以通过 CSS 变量或 JavaScript 动态调整。

兼容性

conic-gradient 在现代浏览器中支持良好（Chrome、Firefox、Edge、Safari）。
如果需要兼容旧版浏览器，可以使用 SVG 或 JavaScript 实现类似效果。