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

这个倒是比较简单，两个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. AutoFac在项目中的应用

    技能大全:http://www.cnblogs.com/dunitian/p/4822808.html#skill 完整Demo:https://github.com/dunitian/LoTCode ...

  2. Modify Branding of FreeCAD

    Modify Branding of FreeCAD eryar@163.com This article describes the Branding of FreeCAD. Branding me ...

  3. 读python源码--对象模型

    学python的人都知道,python中一切皆是对象,如class生成的对象是对象,class本身也是对象,int是对象,str是对象,dict是对象....所以,我很好奇,python是怎样实现这些 ...

  4. 【Java大系】Java快速教程

    感谢原作者:Vamei 出处:http://www.cnblogs.com/vamei Java是面向对象语言.这门语言其实相当年轻,于1995年才出现,由Sun公司出品.James Gosling领 ...

  5. springmvc SSM shiro redis 后台框架 多数据源 代码生成器

    A集成代码生成器 [正反双向(单表.主表.明细表.树形表,开发利器)+快速构建表单 下载地址    ; freemaker模版技术 ,0个代码不用写,生成完整的一个模块,带页面.建表sql脚本,处理类 ...

  6. Flexible 弹性盒子模型之CSS flex-shrink 属性

    实例 让第二个元素收缩到其他元素的三分之一: 效果预览 div:nth-of-type(2){flex-shrink:3;} 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号. 紧跟在 - ...

  7. SharePoint 2016 必备组件离线安装介绍

    前言 SharePoint 必备组件安装,一直以来都是SharePoint安装过程中的最大的坑,尤其是不能联网的服务器.博主在这里简单介绍一下离线安装过程,并附组件包下载以及安装命令,并且在windo ...

  8. postgresql 基本语法

    postgresql数据库创建/修改/删除等写入类代码语法总结: 1,创建库 2,创建/删除表 2.1 创建表 create table myTableName 2.2 如果表不存在则创建表 crea ...

  9. [DJANGO] excel十几万行数据快速导入数据库研究

    先贴原来的导入数据代码: 8 import os os.environ.setdefault("DJANGO_SETTINGS_MODULE", "www.setting ...

  10. 使用Hystrix提高系统可用性

    今天稍微复杂点的互联网应用,服务端基本都是分布式的,大量的服务支撑起整个系统,服务之间也难免有大量的依赖关系,依赖都是通过网络连接起来. (图片来源:https://github.com/Netfli ...