Adding Lottie animation in React JS

Lottie is an open source animation file format that’s tiny, high quality, interactive, and can be manipulated at runtime. Let us learn how to implement Lottie animation in React.js. Lottie animations are mainly used for loader screen or as a start screen. It is written and implemented in JSON format in our React projects.


Go to the official Lottie animation website and download Lottie JSON.

Link to animation the I am going to use −

Name the JSON file "myloader.json" and keep it at the same level as App.js.

Now install the react-lottie package −

npm i --save react-lottie

Lottie library will be used to add lottie-animation’s JSON file to your React site.

Add the following lines of code in App.js

import Lottie from "react-lottie";

// importing lottie animation JSON
// note that you can use any variable in place of "animation"
import animation from './myloader.json'
function App() {
   const defaultOptions = {
      loop: true,
      autoplay: true,
      // here is where we will declare lottie animation
      // "animation" is what we imported before animationData: animation,
      rendererSettings: {
         preserveAspectRatio: "xMidYMid slice",

   return (
         <Lottie options={defaultOptions} height={300} width={300} />

export default App;

Here in defaultOptions, we simply added some animation properties and linked to our Lottie animation JSON. Then we rendered a lottieView with our default options and link to animation.


It will produce the following output −

Updated on: 28-Sep-2021


Kickstart Your Career

Get certified by completing the course

Get Started