DEV Community

I built these 5 types of loading animation in HTML and CSS, which do you prefer?

Adeyele Paul on April 22, 2024

As a lover of clean UI design and smooth animations, I've always been fascinated by the creative possibilities of the humble loading state. From mi...
Collapse
 
oculus42 profile image
Samuel Rouse •

I particularly love the shapeshifting amorphous blob!

Animations like in this article may be good candidate for embedded CodePen, if you are interested.

Collapse
 
peboy profile image
Adeyele Paul •

Yeah, thank you for letting me know

Collapse
 
amiceli profile image
amiceli •

Same, this loading is very beautiful.
Thanks for CodePen link, I can look it a long time ^^.

Collapse
 
glenngg profile image
Glenn •

Really liked the blob loader...

Collapse
 
akbaran profile image
akbaran •

I like how compact your code is. I can't believe that people can animate some things using only CSS! My favorite is The Pulsing Dots. Nice work.

Collapse
 
koteisaev profile image
Kote Isaev - #StandWithUkraine •

morphing dots are the best, IMO.
The basic spinner (1st animation) is very good too. I would consider to use centered background with website logo (and larger radius), for cases when site has logo, and loader used for some medium-long page-wide or blocking data loading...

Collapse
 
succidy profile image
Succidy •

This is great!!

Collapse
 
fadekocodeit profile image
Oluwagbenga Fadeko James •

Awesome! Design

Collapse
 
jackmutech profile image
Mugisa Jackson •

It is waoo and thank you

Collapse
 
navjot369 profile image
Navjot Singh •

Pulsing Dots o O o

Collapse
 
udaygiri profile image
Udaygiri D. Aparnathi •

Bro 😎 just mind blowing 😉

Collapse
 
peboy profile image
Adeyele Paul •

Thank you!

Collapse
 
udaygiri profile image
Udaygiri D. Aparnathi •

Hello @peboy can I have your Instagram I'd so I can follow you and contact you?

Collapse
 
citronbrick profile image
CitronBrick •

1
I might have chosen 4, if the size difference between the "active" dot & the other 2 was more noticeable.

Collapse
 
akbaran profile image
akbaran •

Interesting!

Collapse
 
bart97coder profile image
Bart97coder •

really great advice

Collapse
 
jsm91 profile image
Jesse •

They all have a charm about them, but I like the 3rd and 4th best :). The blob has a modern sleekness about it, but I like the simplicity and color of the 4th too ❤️

Collapse
 
bobbyleex profile image
BobbyleeX •

Great work, It a very cool animation.

Collapse
 
arize99 profile image
Arize Nnonyelu •

Omo well done.

Collapse
 
romeorel profile image
Romeo •

It's captivating how you illustrate and explain things. Very good writing skill.
You would be a good copywriter.

Collapse
 
peboy profile image
Adeyele Paul •

Smiles.... Thank you Romeo 😀

Collapse
 
govardhana profile image
Govardhana •

First one

Collapse
 
shjordan profile image
Jordan Humberto de Souza •

I liked the 3rd the most.

Collapse
 
marusoft profile image
Alimi Kehinde Morufudeen •

I Love this article. It is well presented and illustrative.

Collapse
 
listnerjazz profile image
Jazz_listner🇿🇦 •

I loved them all, in my experience I've always had a problem with the X and Y axis. My problem is I don't know how and when to use them.

Collapse
 
lisacee profile image
Lisa Cee •

I really like the pulsing dots. Staggering the delay is a clever way to get that effect.

Collapse
 
danishasif profile image
Danish Asif •

I was waiting for animation to load 😂

Collapse
 
timawake profile image
Timilehin •

This is really nice,it an eye opener

Collapse
 
raduolivas profile image
Rodolfo Silva •

shape shifting is really dope!

Collapse
 
supermari0s profile image
Μάριος •

Nice 👍 I like the last one !

Collapse
 
happilyai profile image
Happily.ai •

awesome

Collapse
 
nkshukla profile image
Naval •

The morphing blob was superb. How did you come up with those radius values, just wanna know the thought process yk

Collapse
 
valeria2024 profile image
Valeria •

Interesting!