DEV Community

Cover image for I am back with 100 "Dark Mode" CSS loaders
Temani Afif
Temani Afif

Posted on

I am back with 100 "Dark Mode" CSS loaders

It's been a while since the last collection, but here I am with another one. Let's start 2022 with 100 CSS-only loaders. This time, I joined the Dark Side of the force to create "Dark Mode" loaders.

the dark side

Always the same rule: One div = One loader.

Let's go!


Table of content


The Moving

The Infinity II

The Maze

A dot lost in a maze...

The Square

The Circle

The Eyes

They are watching you

The Factory

The Square vs The Circle

The Blob II

The 3D

You don't need 3D Glasses to watch the below!


That's it!

See you next collection 👍

bye bye


You want to support me?

buy me a coffee

OR

Become a patron

Discussion (29)

Collapse
inhuofficial profile image
InHuOfficial • Edited on

Now I know you are pushing the boundaries of CSS as I can only view about a third of them on my phone (safari is defo the new Internet Explorer! 🤣), can’t wait to get back to my PC and enjoy these properly as they are always mega entertaining and interesting!

Looks like my hunch was right the other day on Twitter 😉

The dark side is strong with this one! 💪

As always an insta ❤️🦄!

Collapse
afif profile image
Temani Afif Author

I bet it's only the aspect-ratio I am using a lot. If we remove it and use width/height it should be good for all

Collapse
inhuofficial profile image
InHuOfficial

almost certain you are right, finally got to PC, they are 🔥!

Probably my favourite set of the series!

Collapse
prohashim profile image
ProHashim

King 👑

Collapse
madza profile image
Madza • Edited on

The master of loaders is back, stronger than ever 💯🔥

Collapse
elmianass profile image
elmiAnass

the best

Collapse
nathan5x profile image
Sabarinathan Masilamani

Your work is amazing man. Keep inspiring and keep up the great work!

Collapse
atulcodex profile image
Atul Prajapati

You are the great loader man, I really appriciate your work

Keep doing brother

Collapse
valeriavg profile image
Valeria

Very niiiice 😍
Would you mind if I use one of them in my pet project?
What's the license / how can I attribute you?

Collapse
afif profile image
Temani Afif Author

Yes sure, use them :)
No need any attribution ;)

Collapse
valeriavg profile image
Valeria

Thank you! I'll add a link to you Dev.to profile then :-)

Collapse
amircahyadi profile image
Amir-cahyadi

👍❤️

Collapse
creativemacmac profile image
creativemacmac

Love the eyes they are so much fun 😄

Collapse
shibbirahmad profile image
Shibbir Ahmad

GREAT! WELDONE

Collapse
alnahian2003 profile image
Al Nahian

My Gosh 😳

Trust me @afif bro! I have never seen such a huge and interesting fun collection of CSS Loader like this ❤

Good to see them :D

Collapse
brojenuel profile image
Jenuel Oras Ganawed

This has a lot of work,, awesome work mate!

Collapse
dragon profile image
D7460N

Inspirational.

Thank you!

Collapse
guscarpim profile image
Gustavo Scarpim

Niceeee!

Collapse
harshadpk profile image
Harshad pk

thanks for this man...

Collapse
codingjlu profile image
codingjlu

Beautiful loaders—with just one div? Amazing!!

Collapse
rahulbanerjee99 profile image
Rahul Banerjee

This is great stuff!

Collapse
rammina profile image
Rammina

Keep it up! I've been a fan of your loaders.

Collapse
satie_sann profile image
Natália Satie

awesome project!

Collapse
afif profile image
Temani Afif Author

A situation that reminds me one of my fav song: "back in black" 😜

Collapse
szymonzakiewicz profile image
Szymon Żakiewicz

This is GOLD! Awesome work! Big thanks! Have you considered getting all the parts together as an npm "loaders library"? You`d get hundreds of stars for such quality work!

Collapse
afif profile image
Temani Afif Author

I am preparing better than an NPM package ;)

Collapse
ruslanubaydullayev profile image
ruslanubaydullayev

It's beautiful!

Collapse
soufone profile image
soufiane chahine

🫂 good work man, Keep going 🎉🎉

Collapse
souarikarim profile image
SouariKarim

That was sick !!! keep the good work mate !! thank you !