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

最新推荐文章于 2025-07-08 11:01:30 发布

置顶

Eden-one

最新推荐文章于 2025-07-08 11:01:30 发布

阅读量5.2k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/SHINE_SUNNY1/article/details/80499910

本文介绍了基于Vue2.x实现Loading Bar组件的思路和过程。组件由顶部条形进度条和加载圈组成，通过定时器控制进度条的增长。通过$Loading提供的开始、结束、错误方法控制全局加载进度条。文中还详细讲解了配置参数的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在线演示地址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>
    </div>
    <div