It's been a while but I finally did it. I collected all my CSS-only loaders into one unique place.
π css-loaders.com π
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
random.css-loaders.com
β
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 π
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.
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
How to Create a CSS-Only Loader Using One Element
Single Element Loaders: The Spinner
Single Element Loaders: The Dots
Single Element Loaders: The Bars
Single Element Loaders: Going 3D!
How to create a CSS-only loader with one element
Subscribe to my RSS Feed 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! πͺ
You want to support me?
OR
Top comments (9)
Nice! How on earth do you find the time to do all these?!
It's on Twitter (π) so spread the word π
Mind blowing sources.
Great work.
I don't know what to say.
I'll just say Temani Afif.
This is the most amazing css innovation I have seen in a long while, very impressive.
I like your deep sense of creativity and selflessness. You are a magician π.
The ice cream cone getting eaten is great
The one I like the best is an illusion of spinning (the balls each are just moving back and forth in a straight line) which looks good on either light or dark backgrounds, and you're welcome to add to your collection (CC0 so any usage/license is fine). Besides a DIV version (CSS+HTML) that page also has an SVG+SMIL and an SVG+CSS+SMIL version.
Your understanding of CSS is impressive, but your endless creativity is even more astonishing.
Its pretty good. If it had a search bar, it'd be perfect
Some comments have been hidden by the post's author - find out more