I made 100 CSS loaders for your next project

#css #webdev #beginners #html

You either make a super fast website/application or you use loaders. I think most of us fall into the second category.

Now the question is: what loader should I use? the "loading" text, the 3 dots, a progress bar, the Batman symbol??

You no more need to bother yourself searching for loaders. Find below a collection of 100 different CSS loaders. From the simple one to the more fancy one, you will find the most suitable for your project.

Each loader is done using a single element. Yes, only one <div>, nothing more. You don't have to copy a ton of code. Add a class to your div and start loading!

The Classic

The Infinity

The Dots

The Bars

The Spinner

The Continuous

The Progress

The Wobbling

The Shapes

The Pulsing

That's it!

I hope you liked this first collection of CSS loaders. Yes, it's only the first one and more will come! stay tuned and follow me if you don't want to miss the next collection. 👍

Before you leave don't forget to check the underline/overlay collection I made. More than 100 different animations as well:

100 underline/overlay animations | The ultimate CSS collection 🥇

Temani Afif ・ Mar 16 '21 ・ 2 min read

#css #beginners #webdev #codepen

You want to support me?

OR

Top comments (164)

Atulit Anand • May 12 '21 • Edited

This is so beautiful , I'm enthralled.
Seriously I want to animate my name too any advise @afif or anyone would like to give me.

Temani Afif • May 12 '21

what kind of animation are you looking for?

Atulit Anand • May 12 '21 • Edited

Like one you see in upwork
Where the name becomes a symbol
Thanks for replying mate

Temani Afif • May 12 '21

where exactly on that page? can you show me a screenshot?

Atulit Anand • May 12 '21

Here

Please check it out here, in the last couple of frames how a strand of SVG swooshes in and changes into UP

Temani Afif • May 12 '21

such animation aren't easy to perform using CSS only. Either you use SVG or canvas. Either you have a strong SVG skill to build it alone from scratch (not an easy task) or you consider some plugin. Ex: cssscript.com/svg-text-font-animate/ / codepen.io/Zaku/pen/ALChE / greensock.com/gsap-plugins/

Atulit Anand • May 12 '21 • Edited

Thank you very much, It's exactly what I wanted.

Matt Gregg • May 14 '21

Yea for complex stuff like that I work on your Adobe after effects skills and then use a tool like lotti github.com/airbnb/lottie-web to convert it into a web animation. You can draw svg letters easily enough but complex stuff is animation design usually done with AE.