js简单进度条

傷城~ 2023-06-21 08:51 27阅读 0赞

js的简单进度条

样式

<style>
            .sliderBar-wrap {
            display: inline-block;
            width: 100%;
            border: 1px solid #ccc;
            margin: 15px 0px;
            position: relative;
        }
        .sliderBar {
            width: 100%;
            height: 10px;
            background-color: rgb(245, 172, 38);
            border-radius: 3px;
            animation: progress 10s linear ;
        }
        .sliderBar>.sliderBar-control {
            display: inline-block;
            width: 25px;
            height: 25px;
            text-align: center;
            line-height: 25px;
            border: 1px solid rgb(240, 27, 194);
            border-radius: 50%;
            background-color: #fff;
            position: absolute;
            left: calc(100% - 25px);
            bottom: -85%;
            text-align: center;
            line-height: 25px;
            animation: move 10s linear ;
          
        }
        
        @keyframes progress {
            from {
                width: 0%;
                background-color: red;
            }
        
            to {
                width: 100%;
                background-color: green;
            }
        }
        
        @keyframes move {
            from {
                left: 0%;
            }
        
            to {
                left: calc(100% - 25px);
            }
        }
     </style>

布局

<div class="sliderBar-wrap">
        <div class="sliderBar">
            <div class="sliderBar-control">
                0
            </div>
        </div>
    </div>

js代码

<script>
    var a = document.getElementsByClassName('sliderBar-control')[0]  
    var count = 0
    var timer = setInterval(function(){
        ++count
        a.innerHTML = count
        if(count>100){  
         
            clearInterval(timer)
           alert('已加载完毕,点击确定重新加载')
           history.go(0) 
    
        }
          
        },100);
    
    
    </script>
    
    
    进度条从0开始

![在这里插入图片描述][20191211215804288.png]  
到100停止的时候弹出一个加载完成的框，点确定的时候通过 history.go(0) 进行刷新页面 使进度条重新开始  
![在这里插入图片描述][20191211215750616.png]

[20191211215804288.png]: https://img-blog.csdnimg.cn/20191211215804288.png
[20191211215750616.png]: https://img-blog.csdnimg.cn/20191211215750616.png

发表评论取消回复

表情：

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

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

相关阅读

相关 js进度条

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></t

r囧r小猫/ 2023年10月01日 12:05/ 0 赞/ 28 阅读

相关 js简单进度条

js的简单进度条样式 <style> .sliderBar-wrap { display: inline-bloc

傷城~/ 2023年06月21日 08:51/ 0 赞/ 28 阅读

相关 javascript进度条（js实例）

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

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

相关 android简单进度条

效果： ![Center][] 一：布局文件 ![Center 1][] activity\_main.xml文件： <LinearLay

冷不防/ 2022年09月29日 06:14/ 0 赞/ 340 阅读

相关 php js 动态进度条

<?php //注意，如果是安全模式，请不要打开，如果不是安全模式，这个选项可以打开 //set\_time\_limit(0); for ($i = 0; $i < 500;

缺乏、安全感/ 2022年07月12日 08:37/ 0 赞/ 342 阅读

相关 css+js 进度条 .

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

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

相关 JS实现进度条

超时函数控制，每隔一秒钟就会执行指定的超时函数，再指定的超时函数里设置进度条的标签的长度，即可完成进度条的显示。 <!DOCTYPE html> <html>

约定不等于承诺〃/ 2022年06月09日 03:24/ 0 赞/ 430 阅读

相关 Javascript实现简单进度条

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

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

相关 python 简单文本进度条程序进度条加载进度条单行刷新

利用time库来替代某个程序的进行过程，做实例，思路是，简单打印出来程序进度单行刷新关键是\\r， python默认是print后换行，所以加一个\\r是光标

朴灿烈づ我的快乐病毒、/ 2022年03月18日 05:50/ 0 赞/ 583 阅读

相关实用简单的进度条加载组件loader.js

一个简单的方法实现一个流程的进度条加载效果，以便在页面中可以通过它来更好地反馈耗时任务的完成进度。要实现这个功能，首先要考虑怎样实现一个静态的进度条效果，类似下面这样的

小灰灰/ 2020年06月01日 17:35/ 0 赞/ 820 阅读