Home

Blogs

Series

  • Three JS
  • Loaders Animation

Finger Tap Loading CSS Animation

2023-05-02T04:26:08Z

Author

  • vinay kurve

Made with

  • Lottie files

About the code

Finger Tap Loading CSS Animation

Compatible browsers

Chrome, Firefox, Safari, Opera, Edge

DemoSource Code

How to use lottie animation in react js

1. Choose Your Lottie

Choose an animation, either one of your own or you can select one from the wide range of free animations on . Make sure you have your animation in Lottie format (.json).

2. Install NPM package (@lottiefiles/react-lottie-player)
npm install @lottiefiles/react-lottie-player
Read Docs
3. Add lottie to your react project

Import package in your code

import { Player} from '@lottiefiles/react-lottie-player'

Add the element Player and set the src prop to a URL pointing to a valid Lottie JSON.


  <Player
  autoplay
  loop
  src="https://assets1.lottiefiles.com/packages/lf20_gc88Qf.json"
  style={{ height: '300px', width: '300px' }}
/>

You can also download the lottie json and add into your project. only change the src prop value to the path of json file

More Integrate options are available at lottiefiles.com/integrations

1. Pure CSS Bouncing Basketball Loader

2. Pure CSS 1 elem moon loader

3. CSS push pop loaders

4. Tile loader CSS variables Houdini magic

5. Add the Bird Loader to your website

6. Add a pizza loader to your website

7. CSS Moon loader with color effect

8. Pure CSS Wizard loader

9. CSS Bouncy Loader

10. Loading Bars CSS Animation

11. Loading CSS Animation

12. Simple Content Preload CSS Animation

13. CSS Loader Zoom in Zoom Out

14. CSS PB JLoader Animation

15. Pure CSS Rotating Loader

16. Staggered Stair Loading Animation

17. Pure CSS Gooey Loader Animation

18. Simple preloader CSS Animation

19. Spinning Liquid in Box Loader

20. Solar System CSS Loading Animation

21. Cube Flipping Loader CSS Animation

22. Finger tap loading animation

23. Paper rotating CSS loader

24. HMS CSS Loader Animation

25. Fluid Loading Animation

26. Blue Dot CSS Loading Animation

27. ServisHero CSS Loading Animation

28. Squid Game Symbols CSS Animation

29. Apple Privacy Lock CSS Animation

30. Infinite Loading CSS Animation

31. Glow Loading CSS Animation

32. Flip Box Loading CSS Animation

33. Finger Tap Loading CSS Animation