当前位置：首页 > 行业动态 > 正文

如何用CSS和JS实现动态圆圈进度条效果？

本文介绍了使用CSS和JS实现圆圈进度条效果的方法，包括利用元素的border属性绘制圆圈、通过旋转子盒子达到动态变化效果，以及使用SVG嵌入HTML文档实现圆形进度条等。

在前端开发中，使用 CSS 和 JavaScript 实现圆圈进度条效果是一种常见且实用的技术，以下是关于如何实现这种效果的详细步骤：

一、创建基本的 HTML 结构

我们需要一个容器来放置我们的进度条，这通常是一个div 元素，用于包裹整个进度条组件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Circle Progress Bar</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="progress-circle" id="progress-circle">
        <div class="progress-text" id="progress-text">0%</div>
    </div>
    <script src="script.js"></script>
</body>
</html>

在这个例子中，progress-circle 是进度条的容器，而progress-text 用于显示当前的进度百分比。

如何用CSS和JS实现动态圆圈进度条效果？

二、添加 CSS 样式

我们为进度条添加样式，使其形成一个圆形，这主要通过设置元素的宽度、高度、边框半径以及背景颜色来实现。

/* styles.css */
.progress-circle {
    width: 200px; /* 圆形宽度 */
    height: 200px; /* 圆形高度 */
    border-radius: 50%; /* 圆形 */
    border: 10px solid #ddd; /* 未完成的进度条颜色 */
    position: relative; /* 定位元素 */
    overflow: hidden; /* 避免超出部分显示 */
}
.progress-circle::before {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    border-radius: 50%;
    background: conic-gradient(#4caf50 0%, #4caf50 var(--progress, 0%), #ddd var(--progress, 0%)); /* 渐变色 */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 中心定位 */
}
.progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px; /* 字体大小 */
}

我们使用了 CSS 的conic-gradient 属性来创建渐变效果，并通过自定义属性--progress 来动态修改进度。

三、使用 JavaScript 初始化进度条并更新进度

如何用CSS和JS实现动态圆圈进度条效果？

在 JavaScript 中，我们需要根据需要初始化进度条，并编写一个函数来更新进度条的显示。

// script.js
$(document).ready(function() {
    // 设置初始进度
    updateProgress(0); // 设置初始百分比为0
});
function updateProgress(percent) {
    // 将输入的百分比限制在0到100之间
    percent = Math.max(0, Math.min(100, percent));
    // 更新圆形进度条的 CSS 变量值
    $('.progress-circle').css('--progress', percent + '%');
    // 更新进度文本
    $('#progress-text').text(percent + '%');
}

这个updateProgress 函数接受一个百分比参数，并将其转换为对应的进度值，它更新进度条的 CSS 变量值和进度文本。

四、测试与调试

我们可以将进度条的值通过调用updateProgress() 函数进行修改，以测试其功能。

如何用CSS和JS实现动态圆圈进度条效果？

setTimeout(() => updateProgress(70), 2000); // 2秒后更新进度到70%
setTimeout(() => updateProgress(100), 4000); // 4秒后更新进度到100%

通过这种方式，我们可以验证进度条在不同时间点的显示效果是否符合预期。

CSS动画JavaScript控制动态进度条圆圈效果

相关文章