实现进度条

通过CSS过渡效果（transition）可以设置宽度的动画过渡。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .progress-bar-container {
            width: 300px;
            height: 20px;
            background-color: #F0F0F0;
            border-radius: 10px;
            overflow: hidden;
        }

        .progress-bar {
            height: 100%;
            background-color: #32CD32; /* 进度条颜色 */
            width: 0%; /* 初始宽度为0% */
            transition: width 0.5s ease-in-out; /* 过渡效果，可自行调整动画时间 */
        }
    </style>
</head>
<body>
    <div class="progress-bar-container">
        <div class="progress-bar"></div>
    </div>
</body>
<script>
    // 获取进度条元素
    const progressBar = document.querySelector('.progress-bar');

    // 设置初始进度为30%
    progressBar.style.width = '30%';

    // 更新进度条进度
    function updateProgress(progress) {
    progressBar.style.width = progress + '%';
    }

    // 示例，假设每隔一秒更新一次进度
    let progress = 30; // 初始进度为30%
    const interval = setInterval(() => {
    progress += 10; // 每次增加10%
    updateProgress(progress);
    
    if (progress >= 100) {
        clearInterval(interval); // 达到100%停止更新
    }
    }, 1000);
</script>
</html>

__EOF__

本文作者：张吱吱
本文链接：https://www.cnblogs.com/zhangzizi/p/17753193.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！
posted @   张吱吱  阅读(31)  评论(0)  编辑  收藏  举报
相关博文：
·  JS实现红包分配（每个人至少1分钱）
·  八股文 | java基础知识
·  css渐变实现进度条动画
·  css进度条
·  进度条的实现
阅读排行：
· 地球OL攻略 —— 某应届生求职总结
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 提示词工程——AI应用必不可少的技术
· .NET周刊【3月第1期 2025-03-02】
点击右上角即可分享
微信分享提示
AI IDE Trae