前言

各位开发大佬，平时肯定见到过这种进度条吧，一直在加载，但等了好久都是在99%

如下所示：
有没有好奇这个玩意儿咋做的呢？
细听分说 （需要看使用：直接看实践即可）

fake-progress

如果需要实现上面的这个需求，其实会涉及到fake-progress这个库，具体是干嘛的呢？
这个库会提供一个构造函数，创建一个实例对象后，里面的属性会给我们进度条需要的数据等信息。
如图所示：

fake-progress库的源码如下：

/* Represents a fakeProgress* @constructor* @param {object} options - options of the contructor* @param {object} [options.timeConstant=1000] - the timeConstant in milliseconds (see https://en.wikipedia.org/wiki/Time_constant)* @param {object} [options.autoStart=false] - if true then the progress auto start*/const FakeProgress = function (opts) {if (!opts) {opts = {};}// 时间快慢this.timeConstant = opts.timeConstant || 1000;// 自动开始this.autoStart = opts.autoStart || false;this.parent = opts.parent;this.parentStart = opts.parentStart;this.parentEnd = opts.parentEnd;this.progress = 0;this._intervalFrequency = 100;this._running = false;if (this.autoStart) {this.start();}
};/* Start fakeProgress instance* @method*/FakeProgress.prototype.start = function () {this._time = 0;this._intervalId = setInterval(this._onInterval.bind(this),this._intervalFrequency);
};FakeProgress.prototype._onInterval = function () {this._time += this._intervalFrequency;this.setProgress(1 - Math.exp((-1 * this._time) / this.timeConstant));
};/* Stop fakeProgress instance and set progress to 1* @method*/FakeProgress.prototype.end = function () {this.stop();this.setProgress(1);
};/* Stop fakeProgress instance* @method*/FakeProgress.prototype.stop = function () {clearInterval(this._intervalId);this._intervalId = null;
};/* Create a sub progress bar under the first progres* @method* @param {object} options - options of the FakeProgress contructor* @param {object} [options.end=1] - the progress in the parent that correspond of 100% of the child* @param {object} [options.start=fakeprogress.progress] - the progress in the parent that correspond of 0% of the child*/FakeProgress.prototype.createSubProgress = function (opts) {const parentStart = opts.start || this.progress;const parentEnd = opts.end || 1;const options = Object.assign({}, opts, {parent: this,parentStart: parentStart,parentEnd: parentEnd,start: null,end: null,});const subProgress = new FakeProgress(options);return subProgress;
};/* SetProgress of the fakeProgress instance and updtae the parent* @method* @param {number} progress - the progress*/FakeProgress.prototype.setProgress = function (progress) {this.progress = progress;if (this.parent) {this.parent.setProgress((this.parentEnd - this.parentStart) * this.progress + this.parentStart);}
};
复制代码

我们需要核心关注的参数只有timeConstant，autoStart这两个参数，通过阅读源码可以知道timeConstant相当于分母，分母越大则加的越少，而autoStart则是一个开关，如果开启了直接执行start方法，开启累计的定时器。
通过这个库，我们实现一个虚拟的进度条，永远到达不了100%的进度条。
但是如果这时候像接口数据或其他什么资源加载完了，要到100%了怎么办呢？可以看到代码中有end()方法，因此显示的调用下实例的end()方法即可。

实践

上面讲了这么多下面结合圆形进度条（后面再出个手写圆形进度条）来实操一下，效果如下：

代码如下所示：

<template><div ref="main" class="home"></br><div>{{ fake.progress }}</div></br><Progress type="circle" :percentage="parseInt(fake.progress*100)"/></br></br><el-button @click="stop">停止</el-button></br></br><el-button @click="close">关闭</el-button></div>
</template><script>
import FakeProgress from "fake-progress";export default {data() {return {fake: new FakeProgress({timeConstant : 6000,autoStart : true})};},methods:{close() {this.fake.end()},stop() {this.fake.stop()}},
};
</script>复制代码

总结

如果需要实现一个永远不满的进度条，那么你可以借助fake-progress
核心是1 - Math.exp((-1 * this._time) / this.timeConstant) 这个公式
涉及到一个数据公式： e的负无穷次方 趋近于0。所以1-e^-x永远到不了1，但趋近于1

核心原理就是：用时间做分子，传入的timeConstant做分母，通过Math.exp((-1 * this._time) / this.timeConstant) 可知，如果时间不断累积且为负值，那么Math.exp((-1 * this._time) / this.timeConstant) 就无限趋近于0。所以1 - Math.exp((-1 * this._time) / this.timeConstant) 就可以得到无限趋近于1 的值

总结，如果需要使用的话，在使用的地方创建一个实例即可(配置autoStart之后就会自动累加)：

new FakeProgress({timeConstant : 6000,autoStart : true
})
复制代码

如果需要操作停止或介绍使用其实例下的对应方法即可

this.fake.end()
this.fake.stop()