DEV Community

Cover image for 30 Free CSS Loading Animation for your website in 2023
Jon Snow
Jon Snow

Posted on • Updated on

30 Free CSS Loading Animation for your website in 2023

#css #webdev #javascript #productivity

We will use Lottie files

Lottie files Effortlessly bring the smallest, free, ready-to-use motion graphics for the web, app, social, and designs. Create, edit, test, collaborate, and ship Lottie animations in no time!

Steps

1. Add this script in your html 




<script 
   src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js">
</script>
Enter fullscreen mode Exit fullscreen mode

2. We will provide a JSON File Link, Which should be placed in the src attribute 



<lottie-player 
 src="Place json file link" 
 background="transparent"  
 speed="1"  
 style="width: 300px; height: 300px;"  
 loop  
 autoplay>
</lottie-player>
Enter fullscreen mode Exit fullscreen mode

If you don't want to use Lottie Files download these Gif

1. Paperplane

Paperplane

Json File 



https://assets4.lottiefiles.com/packages/lf20_x62chJ.json
Enter fullscreen mode Exit fullscreen mode

2. Material wave loading

Material wave loading

Json File 



https://assets8.lottiefiles.com/datafiles/nT4vnUFY9yay7QI/data.json
Enter fullscreen mode Exit fullscreen mode

3. Loading animation blue

Loading animation blue

Json File 



https://assets6.lottiefiles.com/packages/lf20_usmfx6bp.json
Enter fullscreen mode Exit fullscreen mode

4. Loading

Loading

Json File 



https://assets8.lottiefiles.com/datafiles/qm9uaAEoe13l3eQ/data.json
Enter fullscreen mode Exit fullscreen mode

5. Trail loading

Trail loading

Json File 



https://assets8.lottiefiles.com/datafiles/bNwYPnjv3OdFA5w/data.json
Enter fullscreen mode Exit fullscreen mode

6. ServisHero Loading

ServisHero Loading

Json File 



https://assets8.lottiefiles.com/datafiles/Hc0DflKIkYg1j3u/data.json
Enter fullscreen mode Exit fullscreen mode

7. Infinite Loading

Infinite Loading

Json File 



https://assets1.lottiefiles.com/datafiles/LZyeA614QaESwNk/data.json
Enter fullscreen mode Exit fullscreen mode

8. Glow loading

Glow loading

Json File 



https://assets2.lottiefiles.com/datafiles/WKqC5QWz9GiZnlm/data.json
Enter fullscreen mode Exit fullscreen mode

9. Loading

Loading

Json File 



https://assets2.lottiefiles.com/datafiles/ORpUnaV6z0mJ17E/data.json
Enter fullscreen mode Exit fullscreen mode

10. Loading

Loading

Json File 



https://assets7.lottiefiles.com/datafiles/XpFCWApEzLI29va/data.json
Enter fullscreen mode Exit fullscreen mode

Support us

Don't miss the amazing video we've embedded in this post! Click the play button to be inspired

11. Box Loading

Box Loading

Json File 



https://assets2.lottiefiles.com/packages/lf20_a2chheio.json
Enter fullscreen mode Exit fullscreen mode

12. Flip Box Loading

Flip Box Loading

Json File 



https://assets2.lottiefiles.com/packages/lf20_Z4BhGL.json
Enter fullscreen mode Exit fullscreen mode

13. Triangle loading

Triangle loading

Json File 



https://assets2.lottiefiles.com/datafiles/DlRM2jtACyr4IX1u6l5rqtW1QWZKLCkNoBIXWeyH/loading.json
Enter fullscreen mode Exit fullscreen mode

14. Finger Tap Loading

Finger Tap Loading

Json File 



https://assets2.lottiefiles.com/packages/lf20_szlepvdh.json
Enter fullscreen mode Exit fullscreen mode

15. Simple Loading

Simple Loading

Json File 



https://assets2.lottiefiles.com/datafiles/tvGrhGYaLS0VjreZ1oqQpeFYPn4xPO625FsUAsp8/simple loading/simple.json
Enter fullscreen mode Exit fullscreen mode

16. Loading Book

Loading Book

Json File 



https://assets2.lottiefiles.com/datafiles/kdNSsX7MXeXXT1u/data.json
Enter fullscreen mode Exit fullscreen mode

17. Loading gears

Loading gears

Json File 



https://assets2.lottiefiles.com/datafiles/jQOi6i5dHOY4uP3/data.json
Enter fullscreen mode Exit fullscreen mode

18. Loading Success spinner

Loading Success Fail spinner

Json File 



https://assets2.lottiefiles.com/packages/lf20_knpXLX.json
Enter fullscreen mode Exit fullscreen mode

19. Loading Animation

Loading Animation

Json File 



https://assets2.lottiefiles.com/datafiles/kaSuzs8QVBUsk3j/data.json
Enter fullscreen mode Exit fullscreen mode

20. Book Loading

Book Loading

Json File 



https://assets5.lottiefiles.com/packages/lf20_DMgKk1.json
Enter fullscreen mode Exit fullscreen mode

21. Loading pattern

Loading pattern

Json File 



https://assets3.lottiefiles.com/packages/lf20_TEPYi7OqQu.json
Enter fullscreen mode Exit fullscreen mode

22. loading

loading

Json File 



https://assets2.lottiefiles.com/packages/lf20_pMMQPe.json
Enter fullscreen mode Exit fullscreen mode

23. liquid loading amin edalatipour

liquid loading amin edalatipour

Json File 



https://assets2.lottiefiles.com/packages/lf20_qg4cSS.json
Enter fullscreen mode Exit fullscreen mode

24. Fluid Loading Animation

Fluid Loading Animation

Json File



https://assets2.lottiefiles.com/datafiles/iTvqbURmiPR4l5L/data.json
Enter fullscreen mode Exit fullscreen mode

25. Loading

Loading

Json File



https://assets2.lottiefiles.com/temp/lf20_jIG9zu.json
Enter fullscreen mode Exit fullscreen mode

26. Loading Bloob

Loading Bloob

Json File 



https://assets2.lottiefiles.com/packages/lf20_rPGSco.json
Enter fullscreen mode Exit fullscreen mode

27. Loading

Loading

Json File 



https://assets2.lottiefiles.com/datafiles/kn5W819UTw4eDwEBTOscVxDtsBaRzRSLnlqWen3o/Loading/data.json
Enter fullscreen mode Exit fullscreen mode

28. HMS Loading

HMS Loading

Json File 



https://assets2.lottiefiles.com/packages/lf20_t9gkkhz4.json
Enter fullscreen mode Exit fullscreen mode

29. StreetBy Loading

StreetBy Loading

Json File



https://assets2.lottiefiles.com/datafiles/afw92jL6nC0SZCb/data.json
Enter fullscreen mode Exit fullscreen mode

30. 3D rotate Loading Animation

3D rotate Loading Animation

Json File 



https://assets2.lottiefiles.com/datafiles/wFjFleaESNWBzrV/data.json
Enter fullscreen mode Exit fullscreen mode

Best Post

  1. How to create a Scroll to top button in React

  2. CSS 3D Isometric Social Media Menu Hover Effects

CSS 3D Isometric Social Media Menu Hover Effects

  1. Input Box Shake on Invalid Input

For more information

  1. Subscribe my Youtube Channel
    https://www.youtube.com/@democode

  2. Check out my Fiver profile if you need any freelancing work
    https://www.fiverr.com/amit_sharma77

  3. Follow me on Instagram
    https://www.instagram.com/fromgoodthings/

  4. Check out my Facebook Page
    Programming memes by Coder

  5. Linktree
    https://linktr.ee/jonSnow77

jon_snow789

25 Programming Memes Refresh Your Mind

Jon Snow ใƒป Apr 9 '23

#jokes #webdev #programming #javascript

Use Our RSS Feed 



 https://dev.to/feed/jon_snow789
Enter fullscreen mode Exit fullscreen mode

Top comments (2)

Collapse
 
amircahyadi profile image
Amir-cahyadi •

Thx bro ๐Ÿ‘๐Ÿ‘

Collapse
 
jon_snow789 profile image
Jon Snow •

Thank you ๐Ÿงก๐Ÿงก

Read next

sotergreco profile image

JavaScript - A Blessing or a Curse?

Sotiris Kourouklis -

igadii profile image

How TypeScript Makes React Better: Smoother Developer Experience, Fewer Bugs (With a useState Example)

Idris Gadi -

alexis_clarembeau_8c3c0e2 profile image

How are responsive websites doing in 2024?

Alexis Clarembeau -

anticoder03 profile image

๐Ÿฅ‡ Top 10 Node.js Libraries for Web Development ๐Ÿš€

Ashish prajapati -