动态环形进度条制作

动态环形进度条制作

HTML结构

<div class="outer">
    <div class="inner">0%</div>
</div>

CSS样式

.outer {
    width: 100px;
    height: 100px;
    margin: 10px auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: conic-gradient(red 180deg, rgb(255, 255, 255) 0deg);
    box-shadow: -5px -3px 14px 1px #000000, 0px 1px 14px 0px #ffffff;
}

.inner {
    width: 80px;
    height: 80px;
    background-color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: inset 0px 0px 4px 0px black;
    font-weight: bolder;
    font-size: 1rem;
}

JavaScript动态效果

// 获取外部和内部div的引用
const progressbar = document.querySelector(".outer");
const innerbar = document.querySelector(".inner");

// 初始角度为0
let currentdeg = 0;

// 定义一个每15毫秒执行一次的定时器
const myInterval = setInterval(() => {
    // 每次增加1度
    currentdeg += 1;

    // 计算当前角度对应的百分比
    const percentage = Math.floor((currentdeg / 360) * 100);

    // 更新外部div的背景渐变角度
    progressbar.style.background = `conic-gradient(red ${currentdeg}deg, rgb(255, 255, 255) 0deg)`;

    // 更新内部div显示的百分比
    innerbar.innerHTML = `${percentage}%`;

    // 如果达到60%以上，停止定时器
    if (percentage > 60) {
        clearInterval(myInterval);
    }
}, 15);

解释：

• HTML结构：包含一个外部和一个内部div，用于显示环形进度条和进度百分比。
• CSS样式：外部div使用了环形渐变背景，内部div用于显示百分比，并且都具有圆形样式和阴影效果。
• JavaScript动态效果：使用定时器每15毫秒增加1度，更新外部div的背景渐变角度和内部div的百分比显示，直到达到60%时停止定时器。

这种动态效果使得环形进度条能够模拟加载过程，并根据实际进度动态更新界面。