当前位置：首页 > VUE

vue实现加载条

2026-01-15 22:12:51VUE

Vue 实现加载条的方法

使用第三方库（如 NProgress）

安装 NProgress 库：

npm install nprogress

在 Vue 项目中引入并使用：

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

// 在路由切换时显示加载条
router.beforeEach((to, from, next) => {
  NProgress.start()
  next()
})

router.afterEach(() => {
  NProgress.done()
})

自定义加载条组件

创建一个 Vue 组件实现加载条效果：

<template>
  <div class="progress-bar" :style="{ width: progress + '%' }"></div>
</template>

<script>
export default {
  data() {
    return {
      progress: 0
    }
  },
  methods: {
    start() {
      this.progress = 0
      this.simulateProgress()
    },
    simulateProgress() {
      if (this.progress < 95) {
        this.progress += Math.random() * 10
        setTimeout(this.simulateProgress, 300)
      }
    },
    finish() {
      this.progress = 100
      setTimeout(() => {
        this.progress = 0
      }, 500)
    }
  }
}
</script>

<style>
.progress-bar {
  height: 3px;
  background-color: #42b983;
  position: fixed;
  top: 0;
  left: 0;
  transition: width 0.3s;
  z-index: 9999;
}
</style>

结合 Axios 拦截器实现

在请求时显示加载条：

import axios from 'axios'

axios.interceptors.request.use(config => {
  NProgress.start()
  return config
})

axios.interceptors.response.use(response => {
  NProgress.done()
  return response
}, error => {
  NProgress.done()
  return Promise.reject(error)
})

使用 Vue 过渡效果

通过 v-if 和过渡效果实现加载提示：

<template>
  <transition name="fade">
    <div v-if="loading" class="loading-overlay">
      <div class="loading-spinner"></div>
    </div>
  </transition>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.loading-spinner {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>

这些方法可以根据项目需求选择使用，第三方库实现更简单，自定义组件灵活性更高。

vue实现加载条