JavaScript CSS 线性进度条

谁借莪１个温暖的怀抱￠ 2022-12-30 14:57 198阅读 0赞

## JS CSS 进度条 ##

html

<div id="show" class="show">
        <div class="box">
            <div class="line-box" id="line_box">
                <div class="line" id="line"></div>
            </div>
            <div id="num" class="num">0%</div>
        </div>
    </div>

css

.show{ 
       width: 600px;
        margin: 50px auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .box{ 
        width: 260px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
    .line-box{ 
        flex-shrink: 0;
        width: 180px;
        height: 14px;
        border-radius: 14px;
        overflow: hidden;
        border: 1px solid #2979ff;
    }
    .line{ 
        height: 100%;
        border-radius: 14px;
        background: #2979ff;
    }
    
    .num{ 
        color: #2979ff;
    }

js

let line_box = document.getElementById('line_box');
    let line = document.getElementById('line');
    let num = document.getElementById('num');
    
    let lineLength = 0;
    let setTime = setInterval(function(){     //模拟加载
        lineLength += 1;
        line.setAttribute('style', 'width: '+lineLength+'%');  // 设置进度条的长度
        num.innerHTML = lineLength+'%';    //同步显示的值
        if(lineLength >= 100){ 
        	// 加载完成后，修改进度条以及值得显示样式
            line_box.setAttribute('style', 'background: #19be6b; border: 1px solid #19be6b;')
            line.setAttribute('style', 'background: #19be6b;')
            num.setAttribute('style', 'color: #19be6b;')
            //清除计时器
            clearInterval(setTime);
        }
    },20);

发表评论取消回复

表情：

评论列表（有 0 条评论，198人围观）

还没有评论，来说两句吧...

相关阅读

相关如何实现CSS半圆进度条

![e8c8a4282bee4ea8be9e3133bc653902.png][] 要实现CSS半圆进度条，可以使用以下步骤： 1 创建一个具有指定半径和高度的div元素，

左手的ㄟ右手/ 2024年03月26日 23:09/ 0 赞/ 99 阅读

相关 javascript进度条（js实例）

利用javascript模拟下载进度条，可以防止重复点击。 > 思路：用两个div嵌套，开始时，初始时里面的div宽度为0，当点击下载时，让里面的div宽度一直+1，当加到1

Myth丶恋晨/ 2023年01月17日 03:23/ 0 赞/ 157 阅读

相关 JavaScript CSS 线性进度条

JS CSS 进度条 html <div id="show" class="show"> <div class="box">

谁借莪１个温暖的怀抱￠/ 2022年12月30日 14:57/ 0 赞/ 199 阅读

相关用css写进度条

用css写进度条我们平时写进度条一般是一个父div包裹一个子div，用js控制子div的宽度实现进度条，我们现在可以用css简单实现进度条了。代码如下：在

怼烎@/ 2022年12月29日 04:56/ 0 赞/ 123 阅读

相关 CSS实现进度条和订单进度条 (实用、赞）

原文出处：[CSS实现进度条和订单进度条 - 郭锦荣 - 博客园][CSS_ - _ -] 效果图如下： ![watermark_type_ZHJvaWRzYW5zZmF

女爷i/ 2022年09月14日 14:23/ 0 赞/ 292 阅读

相关 css+js 进度条 .

<html> <head> <title>简单的进度条</title> <mce:style type="text/css"><!-- \ProgressBar

た入场券/ 2022年06月18日 05:48/ 0 赞/ 242 阅读

相关 Javascript实现简单进度条

<html> <head> <meta charset="utf-8"> <link rel="stylesheet" type

水深无声/ 2022年06月05日 08:17/ 0 赞/ 263 阅读

相关进度条制作-CSS动画

温馨提示代码参考 \[本人博客\]：https://blog.csdn.net/qq\_41115965/article/details/83713343

╰半夏微凉°/ 2021年09月16日 21:30/ 0 赞/ 404 阅读

相关重构-线性进度条

动画: 传递颜色数组后,颜色过渡宽度改变有0.6s过渡参数: percentage: PropTypes.numb

落日映苍穹つ/ 2021年07月25日 01:42/ 0 赞/ 391 阅读

相关 flutter 环形进度条组件CircularProgressIndicator、线性进度条组件LinearProgressIndicator

环形进度条组件不能放在ListView中若不设置value,即无value参数,会一直加载动画 LinearProg

偏执的太偏执、/ 2021年07月24日 22:59/ 0 赞/ 1259 阅读