css-loaders.com: The Biggest Collection of Loading Animations (more than 500 🤯)
Tags: webdev, css, html, beginners
Published: 2023-08-30 09:36:53

It's been a while but I finally did it. I collected all my CSS-only loaders into one unique place.

---

##  <center>👉 [css-loaders.com](https://css-loaders.com/) 👈 </center>

---

Around 580 loaders are made using only **one** element! The HTML is as simple as `<div class="loader"></div>`. Nothing more!

If you followed me, you probably know most of them but if you are new then go check what CSS can do. From the simple animations to the craziest ones, you will for sure find what you want. If you don't want any loaders, then simply enjoy some fancy CSS animations that are satisfying to watch.

----

> More than 500?! It's too much! I don't have time 😤

No problem, I have the solution! Use the following link and I will pick a nice loader for you

### <center>[random.css-loaders.com](https://random.css-loaders.com/)<center>

​

If you don't like it, click on "get another CSS loader" and you will get another one. No need to navigate the whole website. Keep surprising yourself with random loaders until you get the perfect one. 

You also have a unique link for each generated loader. You can easily share your favorite one with anyone!

> How to get the link of a loader I saw inside the collection and not using the random generator?

It's easy! Let's suppose you are browsing "The shapes" loaders here: https://css-loaders.com/shapes/ and you liked the #20. The link will be: https://css-loaders.com/shapes/#l20 (it's a lowercase "L" not "I"). 

Share the link of your favorite one in the comment section 👇


<sub>The random feature and the link sharing use the `:has()` selector so it won't work well on Firefox for now. Consider another browser if you want to enjoy them.</sub>


---

I also wrote a lot of articles about creating single-element loaders. Good tutorials if you want to know some of my secret recipes 🤫

[Build your CSS loader with only one div — The Dots](https://dev.to/afif/build-your-css-loader-with-only-one-div-the-dots-3882)

[How to Create a CSS-Only Loader Using One Element](https://www.freecodecamp.org/news/how-to-create-a-css-only-loader/)

[Single Element Loaders: The Spinner](https://css-tricks.com/single-element-loaders-the-spinner)

[Single Element Loaders: The Dots](https://css-tricks.com/single-element-loaders-the-dots/)

[Single Element Loaders: The Bars](https://css-tricks.com/single-element-loaders-the-bars/)

[Single Element Loaders: Going 3D!](https://css-tricks.com/single-element-loaders-going-3d/)

[How to create a CSS-only loader with one element](https://verpex.com/blog/website-tips/how-to-create-a-css-only-loader-with-one-element)

Subscribe to my [RSS Feed](https://css-articles.com/feed.xml) if you don't want to miss my new CSS articles and don't forget to bookmark https://css-loaders.com/. 

I won't stop making CSS loaders. The goal is, one day, to reach 1000 single-element loaders! 💪 

![Stay Tuned](https://media.giphy.com/media/jaXDDTuKmeJvwI56kV/giphy.gif)

----

### <center>You want to support me?</center>

[![buy me a coffee](https://cdn.buymeacoffee.com/buttons/default-orange.png)](https://www.buymeacoffee.com/afif)

### <center>OR</center>

[![Become a patron](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/db3jtgy2i5l4w8slkps5.png)](https://www.patreon.com/temani)