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

这个倒是比较简单，两个div即可，bootstrap官方就提供有多种主题的进度条组件。如果自己要用，参照下别人的代码，写成自己的风格即可，实际上也非常的好理解：

.progress {

    height: 20px;

    background-color: #f5f5f5;

    border-radius: 4px;

    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);

}

.progress-bar {

    float: left;

    width: 0;

    height: 100%;

    font-size: 12px;

    line-height: 20px;

    color: #fff;

    text-align: center;

    background-color: #337ab7;

    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);

    position: relative;

    border-radius: 4px;

}

第二步，就是该考虑下如何来计算进度。以资源加载为例，如果是客户端，通常我们是有权限去读取资源实际大小的，所以在计算加载进度的时候，只要拿已加载的数据量除以要加载的总的数据量即可；但是在网页端，我们没有这个能力去拿到要加载的资源的大小，所以只能采用一个不那么准确的方案，用已加载的资源个数除以总的资源个数。基于后面的计算方法，我们只需要在每个耗时任务完成的时刻，计算好已完成的任务进度，然后给进度条设置相应的宽度即可。

下面我用定时器模拟了4个同时发起，但是需要不同时间才能完成的异步任务来实现这一步的功能：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <link href="loader.css" rel="stylesheet">

</head>

<body>

<div id="loader" class="loader">

    <div class="progress">

        <div class="progress-bar progress-bar-striped">

            <div class="progress-value"></div>

        </div>

    </div>

</div>

</body>

<script src="jquery.js"></script>

<script>

    var $bar = $('#loader').find('.progress-bar');

    var $value = $bar.find('.progress-value');

    var Task = function (index, duration) {

        setTimeout(function () {

            var p = (index / 4 * 100).toFixed(0) + '%';

            $bar.css('width',p);

            $value.text(p);

            console.log('第' + index + '个异步任务执行完毕');

        }, duration);

    };

    //模拟四个同时发起的异步任务

    var task1 = new Task(1, 1000);

    var task2 = new Task(2, 3000);

    var task3 = new Task(3, 5000);

    var task4 = new Task(4, 7000);

</script>

</html>

实际效果如下：

当到这一步的时候，其实就已经实现了一个基本的进度条加载功能了。但是上面的效果看起来其实体验不是很好，要是这个进度条的各个进度值能够连续地变化起来就好了，就像下面这样：

为了做到这一步，有的人可能会想到去利用transition，通过给进度条设置一个width .2s类似的transition，那么当进度条宽度变化的自然就能看到进度条连续变化的效果了。这种方式有两个问题：

1. 数字无法连续变化，因为数字从一个值变成另一个值无法通过transition进行过渡；

2. 看不到进度条加载到100%，因为当耗时任务完成进度为100%的时候，除了设置进度条的宽度为100%，一般还会有的逻辑都是隐藏或移除掉进度条，而进度条因为有transition的作用，从它原来的宽度过渡到100%还需要一定的时间，所以用户看不到100%了。

不过这两个都不是大问题，没有进度数字的进度条也很常见；进度条不到100%就进入主功能场景的效果也很常见，而且这种效果有时还能给用户一种错觉，就是好像真的加载地很快。。

假如要纠结以上两个问题，做一个有数字跟进度都满足连续变化，并且一定要在进度条百分百显示完加载效果之后才进入主场景的功能，该如何实现？就像下面的这个类似效果：

在这个要求中，我觉得有两个点需要注意：

一是当一个任务完成的时候，剩下的任务可能都还没有完成，这个时候进度条就会进入等待状态，要等到其它任务完成，有了新的进度之后才能看到下一次的加载效果；

二是进度条加载到100%时的回调控制，当任务完成进度为100%的时候，进度条可能还不到100%，等进度条从它当前值变到100%的时候，还需要时间，所以原来在任务完成进度为100%的时候添加的一些进入主场景之类的逻辑，就要换到进度条加载到100%的那个时刻去处理了。

综合以上，我的思路是：

1. 把进度条的变化分成多段，因为每次耗时任务的完成，都会对应一个进度值，这些值大于0且小于等于100，以四个耗时任务为例，它们会把进度条分成：0-25, 25-50, 75-100三段；

2. 把第1步的分段抽象成一个进度条的加载任务，这个任务有两个基本属性：加载时间，变化区间。把这个任务做成一个动画，在动画的每次执行过程中，给外部提供一个回调，并传入当前的进度值，以便设置进度条的宽度。当前的进度值可以根据动画已经执行的时间，加载时间和变化区间来计算。变化区间对应的就是第1步里面的百分比范围。加载时间可以通过变化区间范围 * 进度条加载1%需要的时间计算得到。也就是说要把动画加载1%需要的时间作为一个常量。为了更方便一点，把动画从0加载100%需要的时间作为一个常量更好控制一些。

3. 定义一个队列，用来存放第2步抽象的加载任务。控制好队列第一个任务的执行时机；每执行一个任务，就自动执行下一个。

4. 当任务进度是100%并且队列里的最后一个任务完成的时候，通知外部进行回调。

基于这个思路，我的最终实现是（里面有较详细的注释）：

https://github.com/liuyunzhuge/blog/blob/master/progress_bar/loader.js

使用的方式可以参考（结合demo看上面的源码，会更容易理解）：

http://liuyunzhuge.github.io/blog/progress_bar/demo3.html

这个demo的实际效果就跟前面的那个gif一模一样。

到此为止，我们就得到了一个看起来还比较实用的进度条加载效果控制的组件。不过它也不是没有问题，它的问题在于：进度条加载完成的时间一定会大于我们在前面第2步设置的那个进度条一次性从0加载到100%需要的时间。也就是说这个做法会故意延迟整个耗时任务的过程。所以在实际使用的时候，前面说的那个常量不能定义太长了。

最后补充下，这个组件结合我之前写的一个关于做图片预加载的组件一起使用，可以做出更完美的图片预加载效果，感兴趣的可以尝试一下。

希望本文的内容对大家的实际工作有所帮助，谢谢阅读：）

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

  1. 【消灭代办】第5周 - null拷贝,input自适应,进度条加载,颜色随机值

    2018.12.10 代办一:javascript中js怎么拷贝null的值 null属于简单类型的数值,直接进行拷贝即可: 2018.12.11 代办二:怎么让input自适应宽度? 这样是写下代办 ...

  2. 超酷jQuery进度条加载动画集合

    在丰富多彩的网页世界中,进度条加载动画的形式非常多样,有利用gif图片实现的loading动画,也有利用jQuery和CSS3实现的进度加载动画,本文主要向大家介绍很多jQuery和CSS3实现的进度 ...

  3. 学习 | css3实现进度条加载

    进度条加载是页面加载时的一种交互效果,这样做的目的是提高用户体验. 进度条的的实现分为3大部分:1.页面布局,2.进度条动效,3.何时进度条增加. 文件目录 加载文件顺序 <link rel=& ...

  4. iOS-WKWebview 带有进度条加载的ViewController【KVO监听Webview加载进度】

    前言 为什么要说 WKWebview,在之前做电子书笔记时已经提过 WKWebview 在iOS8之后已完全替代 Webview,原因就不多说了,主要还是内存过大: 封装 封装一个基于 UIViewC ...

  5. 进度条加载与案例优化对比——python使用perf_count方法实现

    本章我们将讨论python3 perf_counter()的用法及它的实际应用我从中选取两个python基于rquests库的爬虫实例代码源文件进行举例 Python3 perf_counter() ...

  6. Vue项目开发，nprogress进度条加载之超详细讲解及实战案例

    Nprogress的默认进度条很细,它的设计灵感主要来源于 谷歌,YouTube 他的安装方式也很简单,你可以有两种使用方式: 直接引入js和css文件 使用npm安装的的方式 直接引入: Npm安装 ...

  7. handler 异步执行（进度条加载到100）

    生明一个handler 对象(可重写handlerMessage 方法) 声明一个Runnable 对象,需重写run方法 按钮事件:handler对象实例的post方法调用线程. 线程的run方法开 ...

  8. CSS3 Loading进度条加载动画特效

    在线演示 本地下载

  9. CSS3彩色进度条加载动画 带进度百分比

    在线演示       本地下载

随机推荐

  1. 引人瞩目的 CSS 变量（CSS Variable）

    这是一个令人激动的革新. CSS 变量,顾名思义,也就是由网页的作者或用户定义的实体,用来指定文档中的特定变量. 更准确的说法,应该称之为 CSS 自定义属性 ,不过下文为了好理解都称之为 CSS 变 ...

  2. angularjs 依赖注入--自己学着实现

    在用angular依赖注入时,感觉很好用,他的出现是 为了"削减计算机程序的耦合问题" ,我怀着敬畏与好奇的心情,轻轻的走进了angular源码,看看他到底是怎么实现的,我也想写个 ...

  3. Maven 代理设置

    在maven的安装目录下 %MAVEN_HOME%/conf/setting.xml 中进行设置 <proxies>    <!-- proxy     | Specificatio ...

  4. isEmpty和isNull()区别

     isEmpty和isNull()区别一个NULL字符串一定是一个空串,一个空串未必是一个NULL字符串例如:QString().isNull():   //结果为trueQString().isEm ...

  5. javaScript生成二维码（支持中文，生成logo）

    资料搜索 选择star最多的两个 第一个就是用的比较多的jquery.qrcode.js(但不支持中文,不能带logo)啦,第二个支持ie6+,支持中文,根据第二个源代码,使得,jquery.qrco ...

  6. CSS3自定义滚动条样式 -webkit-scrollbar(转)

    有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了.那webkit浏览器是如何自定义滚动条的呢? 前言 ...

  7. BPM SharePoint解决方案分享

    一.需求分析 SharePoint作为微软推出的协同类平台产品,为客户提供了门户.内容.文档.流程.社区.搜索.BI等一系列的解决方案,然而其流程功能由于设计理念差异,不能完全满足客户的需求,主要原因 ...

  8. ios label 自动计算行高详解

    在OC当中自动计算行高主要调用系统的 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #ffffff } span ...

  9. Atitit.技术管理者要不要自己做开发？？

    Atitit.技术管理者要不要自己做开发?? 1. 为什么很多管理者不能自己亲自做了1 1.1. 沟通成本多了1 1.2. .组织分散. 1 1.3. 会议多 .协调多 1 1.4. 问题的根源在于我 ...

  10. Ubuntu下配置apache开启https

    一.HTTPS简述随着网络的日常,信息安全越来越重要,传统的网站都是http协议明文传输,而HTTPS协议是由SSL+HTTP协议构建的可进行加密传输.身份认证的网络协议,比http协议安全. 那ht ...