30 Free CSS Loading Animation for your website in 2023
Tags: css, webdev, javascript, productivity
Published: 2023-04-15 16:24:09

### 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 

```html

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

```

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

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

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

---
---


### 1. [Paperplane](https://lottiefiles.com/9844-loading-40-paperplane)


![Paperplane](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qz8wfqcxkuewy76ow8nd.gif)


Json File 

```bash
https://assets4.lottiefiles.com/packages/lf20_x62chJ.json
```

---

### 2. [Material wave loading](https://lottiefiles.com/196-material-wave-loading)


 
![Material wave loading](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1epski7rjxo5dqd0kjdv.gif)

Json File 

```bash
https://assets8.lottiefiles.com/datafiles/nT4vnUFY9yay7QI/data.json
```

---

### 3. [Loading animation blue](https://lottiefiles.com/97952-loading-animation-blue)


![Loading animation blue](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bxwdcu0newhn8s4dupne.gif)

Json File 


```bash
https://assets6.lottiefiles.com/packages/lf20_usmfx6bp.json
```

---

### 4. [Loading](https://lottiefiles.com/40-loading)


![Loading](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wnnwj22dh4am7rkt83wf.gif)

Json File 


```bash
https://assets8.lottiefiles.com/datafiles/qm9uaAEoe13l3eQ/data.json
```

---

### 5. [Trail loading](https://lottiefiles.com/222-trail-loading)


![Trail loading](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/us3k5jnq6s9ghabt8fzr.gif)

Json File 


```bash
https://assets8.lottiefiles.com/datafiles/bNwYPnjv3OdFA5w/data.json
```

---

### 6. [ServisHero Loading](https://lottiefiles.com/159-servishero-loading)


![ServisHero Loading](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gtppm75lq883tm9uaozp.gif)

Json File 


```bash
https://assets8.lottiefiles.com/datafiles/Hc0DflKIkYg1j3u/data.json
```

---

### 7. [Infinite Loading](https://lottiefiles.com/28-loading)


![Infinite Loading](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3u5zzn2nrha4lh9xc3uc.gif)

Json File 

```bash
https://assets1.lottiefiles.com/datafiles/LZyeA614QaESwNk/data.json
```

### 8. [Glow loading](https://lottiefiles.com/197-glow-loading)


![Glow loading](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a2b4mjhwxlnywv2r76ko.gif)

Json File 

```bash
https://assets2.lottiefiles.com/datafiles/WKqC5QWz9GiZnlm/data.json
```

---

### 9. [Loading](https://lottiefiles.com/935-loading)


![Loading](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6h53jtj6hjyl5st216xi.gif)

Json File 

```bash
https://assets2.lottiefiles.com/datafiles/ORpUnaV6z0mJ17E/data.json
```

---

### 10. [Loading](https://lottiefiles.com/690-loading)


![Loading](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5bvv0lq3jyg3pn50l27r.gif)

Json File 

```bash
https://assets7.lottiefiles.com/datafiles/XpFCWApEzLI29va/data.json
```

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

{% youtube 49s7aLqh-nk %}

---
---

### 11. [Box Loading](https://lottiefiles.com/98432-loading)



![Box Loading](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ifwxujkyt5m4xt6my0l0.gif)

Json File 

```bash
https://assets2.lottiefiles.com/packages/lf20_a2chheio.json
```

---

### 12. [Flip Box Loading](https://lottiefiles.com/9629-loading)




![Flip Box Loading](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dh3vymy2krm26o12iwon.gif)

Json File 

```bash
https://assets2.lottiefiles.com/packages/lf20_Z4BhGL.json
```

---

### 13. [Triangle loading](https://lottiefiles.com/927-triangle-loading)


![Triangle loading](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5xqup1kv041xvqgikdrn.gif)

Json File 

```bash
https://assets2.lottiefiles.com/datafiles/DlRM2jtACyr4IX1u6l5rqtW1QWZKLCkNoBIXWeyH/loading.json
```

---

### 14. [Finger Tap Loading](https://lottiefiles.com/78259-loading)


![Finger Tap Loading](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gixl5w8qls2c4p4g3d9s.gif)

Json File 

```bash
https://assets2.lottiefiles.com/packages/lf20_szlepvdh.json
```

---

### 15. [Simple Loading](https://lottiefiles.com/855-simple-loading)



![Simple Loading](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/41ycq7ik8sbeqeglmidb.gif)

Json File 

```bash
https://assets2.lottiefiles.com/datafiles/tvGrhGYaLS0VjreZ1oqQpeFYPn4xPO625FsUAsp8/simple loading/simple.json
```

---

### 16. [Loading Book](https://lottiefiles.com/2275-loading-book)




![Loading Book](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uorwj2cwioke0d2ith0u.gif)

Json File 

```bash
https://assets2.lottiefiles.com/datafiles/kdNSsX7MXeXXT1u/data.json
```

---

### 17. [Loading gears](https://lottiefiles.com/1027-loading-gears)



![Loading gears](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tr57giafk7vuvcfb1jtt.gif)

Json File 

```bash
https://assets2.lottiefiles.com/datafiles/jQOi6i5dHOY4uP3/data.json
```

---

### 18. [Loading Success spinner](https://lottiefiles.com/9914-loading-success-fail-spinner-stroke-update)


![Loading Success Fail spinner](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6raonurr8f9szoc20ikf.gif)


Json File 

```bash
https://assets2.lottiefiles.com/packages/lf20_knpXLX.json
```

---

### 19. [Loading Animation](https://lottiefiles.com/1240-car2go-global-loading-animation)


![Loading Animation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oc0etf3rg6n1x6lk83dw.gif)

Json File 

```bash
https://assets2.lottiefiles.com/datafiles/kaSuzs8QVBUsk3j/data.json
```

---

### 20. [Book Loading](https://lottiefiles.com/28893-book-loading)



![Book Loading](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yib7pzi7szzn1k5fhqkm.gif)

Json File 

```bash
https://assets5.lottiefiles.com/packages/lf20_DMgKk1.json
```

---

{% twitter 1642235382074064896 %}

---

### 21. [Loading pattern](https://lottiefiles.com/142291-loading-pattern)


![Loading pattern](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bt2v82t7rlvnp6qmt1gq.gif)

Json File 

```bash
https://assets3.lottiefiles.com/packages/lf20_TEPYi7OqQu.json
```

---

### 22. [loading](https://lottiefiles.com/9811-loading)



![loading](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vfznzftp2xjpy5u1285x.gif)

Json File 

```bash
https://assets2.lottiefiles.com/packages/lf20_pMMQPe.json
```

---

### 23. [liquid loading amin edalatipour](https://lottiefiles.com/6476-liquid-loading-amin-edalatipour)


![liquid loading amin edalatipour](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/53uackffa48ebotrhlg9.gif)

Json File 

```bash
https://assets2.lottiefiles.com/packages/lf20_qg4cSS.json
```

---

### 24. [Fluid Loading Animation](https://lottiefiles.com/3678-fluid-loading-animation)


![Fluid Loading Animation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/79i571g2lolarenxk0cf.gif)

Json File

```bash
https://assets2.lottiefiles.com/datafiles/iTvqbURmiPR4l5L/data.json
```

---

---

### 25. [Loading](https://lottiefiles.com/4693-loading)



![Loading](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t2xzq3c5px0pv11jp0qy.gif)

Json File

```bash
https://assets2.lottiefiles.com/temp/lf20_jIG9zu.json
```

---

### 26. [Loading Bloob](https://lottiefiles.com/9305-loading-bloob)


![Loading Bloob](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q0g0w8akudtn9qxj0spq.gif)

Json File 

```bash
https://assets2.lottiefiles.com/packages/lf20_rPGSco.json
```

---

### 27. [Loading](https://lottiefiles.com/968-loading)



![Loading](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0kkq0ebfekk4oxz9g1py.gif)


Json File 

```bash
https://assets2.lottiefiles.com/datafiles/kn5W819UTw4eDwEBTOscVxDtsBaRzRSLnlqWen3o/Loading/data.json
```

---

### 28. [HMS Loading](https://lottiefiles.com/99318-hms-loading)



![HMS Loading](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cq1u1gcygxrbtsmi3eox.gif)

Json File 

```bash
https://assets2.lottiefiles.com/packages/lf20_t9gkkhz4.json
```

---

### 29. [StreetBy Loading](https://lottiefiles.com/373-streetby-test-loading)


![StreetBy Loading](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/40kf0z7z4sgn9sfln8av.gif)



Json File

```bash
https://assets2.lottiefiles.com/datafiles/afw92jL6nC0SZCb/data.json
```

---

### 30. [3D rotate Loading Animation](https://lottiefiles.com/260-3d-rotate-loading-animation)



![3D rotate Loading Animation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/616ytimb4mzqdjv0ogxc.gif)

Json File 

```bash
https://assets2.lottiefiles.com/datafiles/wFjFleaESNWBzrV/data.json
```

---
---

 

### Best Post 

1. [How to create a Scroll to top button in React](https://democoding.netlify.app/post/how-to-create-a-scroll-to-top-button-in-react)

2. [CSS 3D Isometric Social Media Menu Hover Effects](https://democoding.netlify.app/post/css-3d-isometric-social-media-menu-hover-effects)

![CSS 3D Isometric Social Media Menu Hover Effects](https://camo.githubusercontent.com/ae671092ea8cd031abde235fae68d7a8111ec4868515fdbbea5f55f696c2e269/68747470733a2f2f692e6962622e636f2f636b314d636a6d2f657a6769662d636f6d2d63726f702e676966)

3. [Input Box Shake on Invalid Input](https://democoding.netlify.app/post/shake-on-invalid-input)
 
---
---

## For more information

 

1. Subscribe my Youtube Channel 
[https://www.youtube.com/@democode](https://www.youtube.com/@democode) 

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

3. Follow me on Instagram
[https://www.instagram.com/fromgoodthings/](https://www.instagram.com/fromgoodthings/)

4. Check out my Facebook Page 
[Programming memes by Coder](https://www.facebook.com/programmingmemesbycoders)

5. Linktree
[https://linktr.ee/jonSnow77](https://linktr.ee/jonSnow77)

 

---
---

{% instagram CqObFa6PR0l %}

---

{% link https://dev.to/jon_snow789/21-programming-memes-refresh-your-mind-1fa0 %}

---
 
---

### Use Our RSS Feed

```bash
 https://dev.to/feed/jon_snow789
```