js实现自定义进度条效果

效果图：

代码如下：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Staged progress bar</title>
  <style type="text/css">
   *{margin:0;padding:0;}
   html,body{height:100%;}
   ul{list-style:none;}
   .cf:after{content:"";display:block;clear:both;height: 0;}
   #bar{height:20px;margin:100px 10px; margin-left: 50px}
   #bar div{float:left;position:relative;}
   #bar .staged, #bar .progress{border-color:#4CA8FF;}
   #bar .staged i{position:relative;overflow:hidden;display:block;width:inherit;height:inherit;}
   #bar .staged i:before{content:"";display:block;width:0;height:inherit;border-radius:50%;}
   #bar .progress {width:120px;height:inherit;margin-left:-4px;z-index:1;border-style:solid;border-width:2px 0;}
   #bar .progress:nth-child(2) i{border-left-width:2px;border-top-left-radius:6px;border-bottom-left-radius:6px;}
   #bar .progress:nth-child(2){border-left-width:2px;border-top-left-radius:10px;border-bottom-left-radius:10px;}
   #bar .progress:last-child{border-right-width:2px;border-top-right-radius:10px;border-bottom-right-radius:10px;}
   #bar .progress i{width:0;height:inherit;display:block;border-radius:0 10px 10px 0;position:relative;font-style:normal;}
   #bar .progress, #bar .staged{background:#7d7d7d;}
   #bar .sp i:before, #bar .progress i{background:#4CA8FF;}
   #bar .staged:not(:first-child){margin-left:-4px; }
   #bar .staged:before{position:absolute;content:attr(data-text);width:inherit;height:inherit;top:90%;left:0;}
   #bar .staged:after{content:attr(data-value);color:#fff;width:inherit;height:inherit;position:absolute;top:0;left:0;}
   #bar .sp i:before{width:100%;transition:width 1s;}
   .msg:before, .msg:after{display:block;position:absolute;border-style:solid;border-color:#ccc;background:#fff;top:30px;}
   .msg:before{content:attr(data-text);width:200px;height:40px;line-height:40px;font-size:12px;text-align:center;border-radius:4px;border-width:1px;top:-68px;left:calc(100% - 114px);}
   .msg:after{content:"";width:14px;height:14px;transform:rotate(45deg);border-width:0 1px 1px 0;top:-34px;left:calc(100% - 20px);}
  </style>
 </head>
 <body>
  <div id="bar" class="cf" data-value="8000" data-text="还有 [number] 点进度加载完成">
   <div class="staged sp" data-value="0" ><i></i></div>
   <div class="progress"><i></i></div>
   <div class="staged" data-value="200" "><i></i></div>
   <div class="progress"><i></i></div>
   <div class="staged" data-value="1000" ><i></i></div>
   <div class="progress"><i></i></div>
   <div class="staged" data-value="5000" ><i></i></div>
   <div class="progress"><i></i></div>
   <div class="staged" data-value="10000" ><i></i></div>
   <div class="progress"><i></i></div>
  </div>
  <script type="text/javascript">
   var progressBar = (function(){
    var $ = function(sele){
     return document.querySelectorAll(sele);
    }
    return function(a){
     var getValue = function(obj,attr){
      return Number(obj.getAttribute(a.value));
     }
     var box = $(a.box)[0];
     var value = getValue(box);
     var text = box.getAttribute(a.text);
     var staged = $(a.staged);
     var progress = $(a.progress);
     var i = 0, index = 0, num = 0, numV = 0, n = 1, af_index = 0, timeout = 0, stopAm = null;
     var af = function(fn){
      if(!requestAnimationFrame || !cancelAnimationFrame){
       clearTimeout(af_index);
       af_index = setTimeout(fn, 1000/60);
      }
      else{
       cancelAnimationFrame(af_index);
       af_index = requestAnimationFrame(fn);
      }
     }
     var setMsg = function(){
      var msg = progress[index];
      if(a.note){
        var arr = text.split(a.note);
        text = arr[0] + n + arr[1];
      }
      msg.setAttribute("data-text", text);
      msg.className = a.msg;
     }
     var animation = function(){
      if(i == 0){
       if(staged.length == index + 1){
        numV = value * 2;
       }
       else numV = getValue(staged[index + 1]);
       if(n == 0) {
        progress[index].style.width = "1%";
        return
       };
       if(n < 0 && staged.length > index + 1){
        n = numV - value;
        if(Number(progress[index].style.width.split("%")[0])<5) progress[index].style.width = "3%";
        setMsg();
        return;
       }
      }
      num = Math.ceil(++i * numV / 100);
      if(num > value){
       num = value;
       //console.log(num)
       n = numV - num;
       if(n > 0){
        if(staged.length > index + 1) setMsg();
        return;
       }
      }
      if(i == 100){
       staged[index + 1].className += " " + a.stagedProgress;
      }
      if(i > 105){ //105% 宽，自己根据样式调整。
       num = numV;
       index++;
       i = 0;
       timeout = setTimeout(function(){
        af(animation);
        clearTimeout(timeout);
       }, a.stagedSleep);
       return;
      }
      progress[index].style.width = i + "%";
      af(animation);
     }
     animation()
    }
   })();
   progressBar({
    box : "#bar",
    text :　"data-text", // box 的属性
    note : "[number]", // box 的属性 （可以省略，计算好直接写入提示语句。）;
    msg : "msg",
    staged : ".staged",
    progress : ".progress i",
    stagedProgress : "sp",
    value : "data-value",
    stagedSleep : "900",
    sleep : "3000"
   });
  </script>
 </body>
</html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

赞 (0)

相关推荐

  • JavaScript实现网页加载进度条代码超简单

    网页进度条能够更好的反应当前网页的加载进度情况,loading进度条可用动画的形式从开始0%到100%完成网页加载这一过程.但是目前的浏览器并没有提供页面加载进度方面的接口,也就是说页面还无法准确返回页面实际加载的进度,本文中我们使用jQuery来实现页面加载进度条效果. HTML 首先我们要知道的是,目前没有任何浏览器可以直接获取正在加载对象的大小.所以我们无法通过数据大小来实现0-100%的加载显示过程. 因此我们需要通过html代码逐行加载的特性,在整页代码的若干个跳跃行数中设置节点,进行

  • JS 进度条效果实现代码整理

    第一种方法:Loading.js 复制代码 代码如下: //频率 var frequency = 50; //步长 var step = 3; //背景颜色 var loadingBgcolor = "#ffffff"; //宽度 var loadingWidth = 354; /* *参数说明: *content:显示内容,可以为空: *imageURL:将引用JS文件的路径设置即可: *left:进度条显示位置left *top:进度条显示位置top */ function Loa

  • Javascript jquery css 写的简单进度条控件

    通过我们伟大的 CSS,可以实现非常漂亮的进度条样式.加上 Javascript 的效果,就可以完全"欺骗"我们的用户,让他们有耐心等待浏览器处理完成.上述的原理已经知道了,那么就可以直接看代码了.本人使用的还是 jQuery 框架,因为这样简短的代码可能会更容易理解. 当然这个控件还有很多需要完成的地方,我仅仅是提供了一种遵循 Web 标准的实现思路.废话不多说. Javascript Progress Bar Demo - jb51.net #progress {backgroun

  • javascript 实现页面加载进度条代码

    javascript 实现页面加载进度条代码

    New Document 加载中,请耐心等待 '); window.onload = function () { document.getElementById('loadbox').style.display="none"; document.getElementById('imglist').style.display="block"; } // --> 欧文加油! [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • js 进度条实现代码

    进度条 body{ text-align:center; } .graph{ width:450px; border:1px solid #F8B3D0; height:25px; } #bar{ display:block; background:#FFE7F4; float:left; height:100%; text-align:center; } #barNum{ position:absolute; } function $(obj){ return document.getElem

  • Extjs实现进度条的两种便捷方式

    做Extjs开发中,往往后台程序可能要执行一段时间才能得到返回结果,加入进度条可以提高客户体验度,以下为两种便捷的方式: 1.提交数据前用Ext.Msg.wait('提示','正在处理数据,请稍候');弹出等待条,数据处理成功后用Ext.Msg.hide();将等待去掉,例如: Ext.Msg.wait('提示','正在处理数据,请稍候'); 复制代码 代码如下: Ext.Ajax.request({ url:'DataAction.ashx?method=update', params:{It

  • 用CSS+JS实现的进度条效果效果

    进度条,就是在用户进入你的网站的时候,能让用户看到网页下载了多少,这个的作用非常明显---就是让用户的等待时间变长,可以有效的弥补空间慢的缺点(当然,你空间太慢,还是建议你换下空间,呵呵) 好了,现在我先来举两个例子 一个是用FLASH实现的 (这个网上很多网站都是,不说了) 一个是用动态的GIF实现的 (这个你可以看微软官方的下载页面,也不说了) 这里,我们的重点是用 CSS+JS 实现这个效果 好了,废话不多说,我们开始 首先,写一段HTML代码 <div id="loading&qu

  • js实现进度条的方法

    js实现进度条的方法

    本文实例讲述了js实现进度条的方法.分享给大家供大家参考.具体实现方法如下: 1.setTimeout和clearTimeout <html> <head> <title>进度条</title> <style type="text/css"> .container{ width:450px; border:1px solid #6C9C2C; height:25px; } #bar{ background:#95CA0D; f

  • PHP中使用Session配合Javascript实现文件上传进度条功能

    Web应用中常需要提供文件上传的功能.典型的场景包括用户头像上传.相册图片上传等.当需要上传的文件比较大的时候,提供一个显示上传进度的进度条就很有必要了. 在PHP 5.4以前,实现这样的进度条并不容易,主要有三种方法: 1.使用Flash, Java, ActiveX 2.使用PHP的APC扩展 3.使用HTML5的File API 第一种方法依赖第三方的浏览器插件,通用性不足,且易带来安全隐患.不过由于Flash的使用比较广泛,因此还是有很多网站使用Flash作为解决方案. 第二种方法的不足

  • javascript 进度条的几种方法

    javascript 进度条的几种方法

    我们先看看最终效果: 第一步,基本 构建基本的代码,看效果演示: 制作进度条的两种方法 *{ margin:0; padding:0; } body{font-size:12px;}h1{font-size:15px;} .wrap{ font-size: 12px; margin:40px auto; width:400px; } /*进度条样式*/ .progressbar_1{ background-color:#eee; height:16px; width:150px; border:

随机推荐