html+css实现圆环进度效果

zjbsama

于 2024-05-06 09:42:44 发布

阅读量327

点赞数 2

文章标签： html css 前端

本文链接：https://blog.csdn.net/zjbsama/article/details/138483748

版权


<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态显示圆环状进度条</title>
    <style>
        body {
            padding: 20px;
        }

        .progress {
            width: 90px;
            height: 90px;
            background: conic-gradient(#F06D6D var(--progress), #f1f1f1 var(--last));
            border-radius: 50%;
            position: relative;

            &::before {
                content: attr(data-progress);
                position: absolute;
                inset: 10px;
                background-color: #fff;
                width: 70px;
                height: 70px;
                text-align: center;
                line-height: 70px;
                border-radius: 50%;
                font-size: 18px;
                
            }
        }
        .progress[data-progress^="0"] {
            --start-angle: calc(360deg * (var(--progress) / 100)); /* 根据进度计算起始角度 */
        }
    </style>
</head>

<body>
    <div class="progress" style="--progress: 80%; --last: 0%;" data-progress="80%"></div>
    <script>
        // 获取进度条元素
        const progressElement = document.querySelector('.progress');
        // 动态设置进度条进度的函数
        function setProgress(progress) {
            progressElement.style.setProperty('--progress', progress);
            progressElement.setAttribute('data-progress', progress);

            // 当进度小于20%时，调整--start-angle
            if (progress < '20%') {
                progressElement.style.setProperty('--start-angle', `calc(360deg * (${progress} / 100))`);
            } else {
                progressElement.style.setProperty('--start-angle', '0deg');
            }
        }
        // 示例：假设从其他地方获取到进度为70%
        const newProgress = '4%';
        // 调用动态设置进度函数，将进度设置为70%
        setProgress(newProgress);
    </script>
</body>

</html>

具体效果如下图所示：