Create an HTML page spinner animation using lottie

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">
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Lottie spinner animation</title>
   <script src="" defer></script>
     style="width: 300px; height: 300px"
  • 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.