当前位置：首页 > VUE

vue加载动画实现

2026-02-10 18:43:29VUE

vue加载动画实现方法

使用CSS动画

在Vue组件中直接添加CSS动画样式，通过v-if或v-show控制显示状态。定义关键帧动画并应用到元素上，适合简单场景。

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

<style>
.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); }
}
</style>

使用第三方库

安装专用动画库如vue-loading-overlay或vue-spinner，提供预置动画效果和更多配置选项。

vue加载动画实现

npm install vue-loading-overlay

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

<script>
import Loading from 'vue-loading-overlay'
export default {
  components: { Loading },
  data() {
    return { isLoading: true }
  }
}
</script>

过渡动画结合

利用Vue的<transition>组件实现加载过程中的渐变动画，适用于内容切换场景。

<transition name="fade">
  <div v-if="loading" class="loading-content">
    <p>Loading...</p>
  </div>
</transition>

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

骨架屏技术

在数据加载前显示内容占位图形，提升用户体验。可通过vue-content-loader库快速实现。

vue加载动画实现

npm install vue-content-loader

<template>
  <content-loader v-if="loading" :speed="2" primaryColor="#f3f3f3">
    <!-- 定义占位图形 -->
  </content-loader>
</template>

路由加载动画

在vue-router的全局前置守卫中添加全屏加载动画，适用于页面跳转场景。

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

按需加载控制

通过封装服务请求拦截器，自动管理加载状态显示与隐藏。

axios.interceptors.request.use(config => {
  store.commit('LOADING_START')
  return config
})

axios.interceptors.response.use(response => {
  store.commit('LOADING_END')
  return response
})