当前位置：首页 > VUE

vue实现加载动画

2026-02-17 23:20:30VUE

使用 CSS 动画实现加载动画

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

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

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

使用第三方库实现复杂动画

Vue 可以集成第三方动画库如 animate.css 或 lottie-web 实现更丰富的加载效果。以 animate.css 为例：

<template>
  <div class="animate__animated animate__bounce animate__infinite">
    Loading...
  </div>
</template>

<script>
import 'animate.css'
</script>

条件渲染加载动画

结合 Vue 的 v-if 或 v-show 指令，在数据加载时显示动画：

<template>
  <div>
    <div v-if="isLoading" class="loading-spinner"></div>
    <div v-else>
      <!-- 加载完成后的内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: true
    }
  },
  mounted() {
    setTimeout(() => {
      this.isLoading = false
    }, 2000)
  }
}
</script>

使用 Vue 过渡效果

Vue 的 <transition> 组件可以为加载动画添加过渡效果：

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

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

组件化加载动画

将加载动画封装为可复用组件：

<!-- LoadingSpinner.vue -->
<template>
  <div class="loading-spinner">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
  </div>
</template>

<style>
.loading-spinner {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.dot {
  width: 12px;
  height: 12px;
  background-color: #3498db;
  border-radius: 50%;
  animation: bounce 1.4s infinite ease-in-out;
}

.dot:nth-child(2) {
  animation-delay: 0.2s;
}

.dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes bounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}
</style>

骨架屏加载效果

实现内容加载前的骨架屏效果：

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

<style>
.skeleton {
  width: 100%;
  padding: 20px;
}

.skeleton-header {
  height: 40px;
  background-color: #e0e0e0;
  margin-bottom: 20px;
  border-radius: 4px;
}

.skeleton-line {
  height: 20px;
  background-color: #e0e0e0;
  margin-bottom: 10px;
  border-radius: 4px;
}
</style>

以上方法可以根据实际需求选择或组合使用，实现不同风格的加载动画效果。

vue实现加载动画