赏心悦目的vue动态加载动画案例集锦

2023-06-05 03:52:53

提升用户体验：全方位掌握 Vue.js Loading 加载效果

在当今快速发展的网络世界中，用户体验至关重要。Vue.js 作为一款流行的前端框架，为创建响应迅速且交互性强的应用程序提供了强大的工具。其中，Loading 加载效果 在提升用户体验方面发挥着举足轻重的作用，让用户在等待数据加载或操作完成时保持耐心。

深入解析 Vue.js Loading 加载效果原理

Vue.js Loading 加载效果利用绝对定位和动画技术来呈现视觉提示。它通过旋转和位移创建环形或线条效果，给用户以正在加载的感觉。为了实现延迟效果，需要设置动画延迟时间。值得注意的是，Vue.js Loading 加载效果不需要指定大小，因为它们使用的是百分比定位，可以自动适应任何大小的容器。

Vue.js Loading 加载效果宝典

以下是使用 Vue.js 创建各种 Loading 加载效果的代码示例：

优雅至极的环形加载动画

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

<script>
export default {
  name: 'LoadingRing',
  mounted() {
    this.startAnimation();
  },
  methods: {
    startAnimation() {
      this.$el.classList.add('loading-ring-animation');
    }
  }
}
</script>

<style>
.loading-ring {
  width: 50px;
  height: 50px;
  border: 5px solid #000;
  border-radius: 50%;
}

.loading-ring-animation {
  animation: loading-ring 1s linear infinite;
}

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

令人赏心悦目的线条加载动画

<template>
  <div class="loading-lines">
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
  </div>
</template>

<script>
export default {
  name: 'LoadingLines',
  mounted() {
    this.startAnimation();
  },
  methods: {
    startAnimation() {
      this.$el.classList.add('loading-lines-animation');
    }
  }
}
</script>

<style>
.loading-lines {
  width: 50px;
  height: 50px;
  position: relative;
}

.loading-lines .line {
  position: absolute;
  width: 5px;
  height: 50px;
  background-color: #000;
}

.loading-lines-animation .line:nth-child(1) {
  animation: loading-line-1 1s linear infinite;
}

.loading-lines-animation .line:nth-child(2) {
  animation: loading-line-2 1s linear infinite;
}

.loading-lines-animation .line:nth-child(3) {
  animation: loading-line-3 1s linear infinite;
}

@keyframes loading-line-1 {
  0% {
    transform: translateX(-50px);
  }
  50% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(50px);
  }
}

@keyframes loading-line-2 {
  0% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(50px);
  }
  100% {
    transform: translateX(0px);
  }
}

@keyframes loading-line-3 {
  0% {
    transform: translateX(50px);
  }
  50% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(-50px);
  }
}
</style>

炫酷无比的齿轮加载动画

<template>
  <div class="loading-gears">
    <div class="gear"></div>
    <div class="gear"></div>
    <div class="gear"></div>
  </div>
</template>

<script>
export default {
  name: 'LoadingGears',
  mounted() {
    this.startAnimation();
  },
  methods: {
    startAnimation() {
      this.$el.classList.add('loading-gears-animation');
    }
  }
}
</script>

<style>
.loading-gears {
  width: 50px;
  height: 50px;
  position: relative;
}

.loading-gears .gear {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 2px solid #000;
  border-radius: 50%;
}

.loading-gears-animation .gear:nth-child(1) {
  animation: loading-gear-1 1s linear infinite;
}

.loading-gears-animation .gear:nth-child(2) {
  animation: loading-gear-2 1s linear infinite;
}

.loading-gears-animation .gear:nth-child(3) {
  animation: loading-gear-3 1s linear infinite;
}

@keyframes loading-gear-1 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes loading-gear-2 {
  0% {
    transform: rotate(120deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes loading-gear-3 {
  0% {
    transform: rotate(240deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>

充满活力的跳跃加载动画

<template>
  <div class="loading-dots">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
  </div>
</template>

<script>
export default {
  name: 'LoadingDots',
  mounted() {
    this.startAnimation();
  },
  methods: {
    startAnimation() {
      this.$el.classList.add('loading-dots-animation');
    }
  }
}
</script>

<style>
.loading-dots {
  width: 50px;
  height: 50px;
  position: relative;
}

.loading-dots .dot {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #000;
}

.loading-dots-animation .dot:nth-child(1) {
  animation: loading-dot-1 1s linear infinite;
}

.loading-dots-animation .dot:nth-child(2) {
  animation: loading-dot-2 1s linear infinite;
}

.loading-dots-animation .dot:nth-child(3) {
  animation: loading-dot-3 1s linear infinite;
}

@keyframes loading-dot-1 {
  0% {
    transform: translateY(-50px);
  }
  50% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(50px);
  }
}

@keyframes loading-dot-2 {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(50px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes loading-dot-3 {
  0% {
    transform: translateY(50px);
  }
  50% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(-50px);
  }
}
</style>