当前位置：首页 > VUE

vue加载动画实现

2026-01-14 02:03:36VUE

Vue 加载动画实现方法

使用 CSS 动画或过渡

在 Vue 组件中可以直接通过 CSS 实现加载动画效果。定义一个简单的旋转动画：

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

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

在 Vue 模板中使用：

<template>
  <div v-if="isLoading" class="loading-spinner"></div>
</template>

使用第三方动画库

可以集成如 Animate.css 这样的 CSS 动画库：

npm install animate.css

在 Vue 中使用：

import 'animate.css'

<template>
  <div 
    v-if="isLoading"
    class="animate__animated animate__fadeIn animate__infinite"
  >
    Loading...
  </div>
</template>

基于 Vue 的过渡系统

利用 Vue 内置的 <transition> 组件实现加载过渡效果：

<template>
  <transition name="fade">
    <div v-if="isLoading" class="loading-overlay">
      <!-- 加载内容 -->
    </div>
  </transition>
</template>

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

使用专用加载组件库

集成如 vue-loading-overlay 这样的专用库：

npm install vue-loading-overlay

使用示例：

import Loading from 'vue-loading-overlay'
import 'vue-loading-overlay/dist/vue-loading.css'

export default {
  components: {
    Loading
  },
  data() {
    return {
      isLoading: false
    }
  }
}

<template>
  <loading :active.sync="isLoading" :can-cancel="false"/>
</template>

骨架屏加载效果

实现内容加载前的占位效果：

<template>
  <div v-if="isLoading" class="skeleton">
    <div class="skeleton-line"></div>
    <div class="skeleton-line"></div>
  </div>
  <div v-else>
    <!-- 实际内容 -->
  </div>
</template>

<style>
.skeleton-line {
  height: 20px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
</style>

路由切换加载动画

在 Vue Router 中实现页面切换时的加载动画：

// router.js
router.beforeEach((to, from, next) => {
  store.commit('setLoading', true)
  next()
})

router.afterEach(() => {
  store.commit('setLoading', false)
})

在 App.vue 中：

<template>
  <div id="app">
    <transition name="page" mode="out-in">
      <router-view/>
    </transition>
    <loading :active="$store.state.isLoading"/>
  </div>
</template>

<style>
.page-enter-active, .page-leave-active {
  transition: opacity 0.3s, transform 0.3s;
}
.page-enter, .page-leave-to {
  opacity: 0;
  transform: translateY(10px);
}
</style>

每种方法适用于不同场景，可以根据项目需求选择合适的实现方式。CSS 动画适合简单需求，专用组件库提供更多功能和自定义选项，骨架屏能提升用户体验。

vue加载动画实现