Vue3 uses Lottie to implement a simple loading animation

In modern front-end development, animation is one of the important elements to enhance the user experience. Lottie is a popular animation library that allows us to render high-quality animations using JSON files. This article will explain how to integrate Lottie animations in Vue 3 projects and implement a load animation effect.

1. What is Lottie

Lottie is an open source animation library for Airbnb. It can export After Effects animations as JSON files and render them on platforms such as Web, iOS, Android, etc. The advantages of Lottie are:

Lightweight: Animation is stored in JSON files, with small file size.

High quality: supports complex vector animation and excellent rendering effect.

Cross-platform: Supports multiple platforms such as Web and mobile.

2. Integrate Lottie in Vue 3

2.1 Installation dependencies

First, we need to install the vue3-lottie plugin, which is the Lottie animation component package for Vue 3.

npm install vue3-lottie

2.2 Introducing the Lottie component

In Vue components, we can introduce the Lottie component in the following ways:

<template>
  <div v-if="visible" class="lottie-loader">
    <Vue3Lottie :animationData="AstronautJSON" :height="400" :width="400" />
  </div>
</template>
 
<script setup lang="ts">
import { inject, ref } from 'vue';
import { Vue3Lottie } from 'vue3-lottie';
import AstronautJSON from './';
 
// Use inject to get visibleconst visible = inject('visible', ref(false));
</script>

2.3 Loading animated JSON file

Lottie animation requires a JSON file as the data source. You canLottieFilesDownload free animated JSON files, or export animations using design tools such as After Effects.

In the code, we introduce the JSON file through import:

import AstronautJSON from './';

2.4 Control animation display

We use inject to get the visible value from the parent component, which controls the display and hiding of the animation. visible is a boolean value of type ref, and when it is true, the animation will be displayed.

const visible = inject('visible', ref(false));

2.5 Style design

To center the animation and overwrite the entire page, we added some CSS styles:

.lottie-loader {
  position: absolute; /* Absolute positioning */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.8); /* Translucent background */
  z-index: 9999; /* Make sure to be above other content */
}

3. Complete code

Here is the complete Vue component code:

<template>
  <div v-if="visible" class="lottie-loader">
    <Vue3Lottie :animationData="AstronautJSON" :height="400" :width="400" />
  </div>
</template>
 
<script setup lang="ts">
import { inject, ref } from 'vue';
import { Vue3Lottie } from 'vue3-lottie';
import AstronautJSON from './';
 
// Use inject to get visibleconst visible = inject('visible', ref(false));
</script>
 
<style scoped>
.lottie-loader {
  position: absolute; /* Absolute positioning */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.8); /* Translucent background */
  z-index: 9999; /* Make sure to be above other content */
}
</style>

4. Use scenarios

This loading animation can be used in the following scenarios:

Page loading: Display animations when the page loads data to improve user experience.

Form Submission: Display animations during form submission to avoid repeated actions by users.

Asynchronous Operation: Displays animations during asynchronous operations such as API requests.

5. Summary

With vue3-lottie, we can easily integrate Lottie animations in Vue 3 projects. This article implements a simple loading animation and explains the implementation details of the code. I hope this article will help you better use Lottie animations in your project and improve the user experience.

Additional Tips

If you need more complex animation controls (such as play, pause, loop, etc.), you can consult the official documentation of vue3-lottie for more APIs.

You canLottieFilesFind more free animation resources on this site.

This is the end of this article about Vue3 using Lottie to implement a simple loading animation. For more related content on Vue3 Lottie loading animation, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!