Lottie is an animation file format in JSON. It allows you to create and display vector animations in your web applications.
To use Lottie animations, follow these steps:
- First, create an Account on LottieFiles. This platform provides a vast collection of pre-made Lottie animations.
- Search for the animation you want (for example, a spinner).
- Once you find the desired animation, save it to your workspace and download the corresponding JSON Lottie file.
- Create an HTML file with the following contents:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Lottie spinner animation</title>
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js" defer></script>
</head>
<body>
<lottie-player
src="data.json"
background="transparent"
speed="1"
style="width: 300px; height: 300px"
loop
autoplay
></lottie-player>
</body>
</html>- Place the downloaded Lottie JSON animation file in the same folder as your HTML file. Rename the animation file to data.json.
- To quickly test your animation, navigate to the folder containing your HTML file and run a PHP server using the following command: php -S localhost:8000
Inside your browser, visit https://localhost:8000/lottieanimation.html to see your Lottie animation in action. - Remember to replace "data.json" with the actual filename of your Lottie animation.
References
Category