How to Create a CSS Page Loading Spinner - Web Design Tutorial

View the SOURCE CODE:

In today's video we'll be taking a look at how to create a CSS only page loader. This is very easy to add to any existing website, project or web app.

If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!

#dcode #css #javascript

[TomasMisura]

this spinner has been immediately implemented into for my project. Thanks a lot for that !

[BenjaminAster]

1:57 to center an item, I would prefer a display: grid; and place-items: center; These are just two lines instead of three.

[howinooz]

This was great. Thank you very much. You did me a big favor with this tutorial and the accompanying codepen. Thank you man.

[BenjaminAster]

1:36 instead of specifying top, left, width & height you can just say inset: 0;

[BenjaminAster]

3:06 instead of specifying a width and a height, you can just specify a width and then an aspect-ratio: 1;

[ck]

Cool. Last part gave me some awesome ideas.

[siyavats]

Thank you so much for this video, was really looking for this kind of video

[ДмитрийХарченко-юс]

Thanks, main idea is cleared. Good luck.

[RazifMohamed]

very nice! easy to understand and follow

[benubaba]

Thank you, i will add this spinner in my project.

[ForfeitStudios]

loader.addEventListener("transitionend", () => {

can be removed it's not needed.

[ianonline]

This looks great and it all makes sense, however it's not working for me, the screen just stays blank. Could it be because I'm masking the URL? The frame loads but after loading Dev Tools says <iframe style="display: none;"></iframe>

[tpzd]

He’s redoing the old one, just better

[codeaxen]

wooow awesome thank you so very much my friend... was wondering how i could add a loader to my Laravel app. but this solved

[Milan]

is there a way to make the loading page fade away when the requests is done because there's some requests still pending.

[BenjaminAster]

2:15 Instead of you could just say #333 to get the same gray.