一、基本思路

为了使网页的进度条满足现有的需求，并且足够轻便，我们使用原生js编写了一个构造函数，为了理解意思，可以将其命名为“Loading”。该函数接收两个参数，即arr和回调。其中arr定义图片数组，回调定义执行后的回调函数。在构造函数中，遍历图片数组来加载图片。加载每张图片后，修改进度条进度，直到所有加载完成，进度条进度为100%。

二、实施步骤

(1)先建一个进度条，把html和css写好。

书写后预览进度条的效果

(2)编写加载构造函数。在这个构造函数中，进度条的css和html是在执行进度条的init方法时动态添加和呈现的。至此，进度条模块已经写好，只需要引入构造函数，实例化一个对象。

(3)实例化进度条对象

第三，改进

这个组件的扩展性比较弱，主要表现在进度条样式上，可以根据不同的进度条示例进行定义。因此，可以将this.setCss方法添加到构造函数中，以个性化不同的进度条实例。修改如下：

如果进度条的颜色是红色而不是默认的#01ffff，则在初始化之前调用setCss方法。

页面效果如下

四.摘要

进度条插件已经开发出来了，但是还有很多可以优化的地方，比如加载进度条的动画可以更优雅，配置风格可以更简洁，代码可读。优化没有止境，学生还是要努力的。