基于vue2.x实现loading bar（加载进度条）组件

在线演示地址Loading Bar

在这之前，我更新了有关一个单选框与复选框的组件实现，有兴趣的小伙伴也可以了解一下，今天我们来介绍一下loading bar 组件的实现原理。

实现思路

• 整个组件ui部分有两部分组成，分别为顶部条形记载进度条，和spinner加载圈组成，整个部分包含在一个大的div里，并且通过fixed进行布局，然后我们通过定时器控制其增长，如果未结束，进度条会一直停留在最后的位置，等待end()事件的触发。如果end()事件触发，进度条加载结束，spinner停止旋转并且消失。
• 因为可复用的关系，Loading Bar全局之后一个，我们通过this.$loading来操作实例。
• 通过调用 $Loading 提供的三种方法来控制全局的加载进度条 start()、end()、error()。

实现过程

• ui部分以及样式

<template>
  <div class="w__loading-bar">
    <div
      class="w__loading-bar--bar"
      :class="isError ? 'w__loading-bar--error' : ''"
      role="bar"
      :style="{transform: 'translate3d(-'+(100-totalProgress)+'%, 0, 0)'}">
      <div class="w__loading-bar--peg"></div>
    <