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

View the SOURCE CODE:
codepen.io/dco...
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.
🏫 My Udemy Courses - www.udemy.com/...
🎨 Download my VS Code theme - marketplace.vi...
💜 Join my Discord Server - / discord
🐦 Find me on Twitter - / dcodeyt
💸 Support me on Patreon - / dcode
📰 Follow me on DEV Community - dev.to/dcodeyt
📹 Join this channel to get access to perks - / @dcode-software
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.

[@sicfxmusic]

OMG I saved 2 bytes!

[@ronakexe]

Sometimes it doesn't work. It's better to use flex.

[@DaMu24]

@@ronakexe Flex doesn't work.

[@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;

[@ck0024]

Cool. Last part gave me some awesome ideas.

[@siyavats6892]

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

[@backend_pinpost]

Thanks. So helpful

[@husseincode]

Very good 👍🏻❤️

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

Thanks, main idea is cleared. Good luck.

[@RazifMohamed]

very nice! easy to understand and follow

[@digvijayyamagekar4300]

nice and easy! , thank you

[@NurioonSoftware]

Good video. Thank you very much

[@oyuncubirlii]

amazing loading spinner!

[@yuthcambo3712]

Big thank for this video

[@fazhari675]

Thanks mate !

[@sahirmmmdova5052]

You are amazing ,thank you a lot✨

[@VocalCove]

Thank you very much bro..

[@benubaba9349]

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

[@mr7oda3]

it's amazing thank you

[@fola_azeez]

Amazing thanks

[@PunhwarCoding]

Nice video

[@ForfeitStudios]

loader.addEventListener("transitionend", () => { document.body.removeChild(loader); can be removed it's not needed.

[@yeomkyeokyeo]

Super cool thanks

[@hassaneoutouaya]

Thank you !

[@atouchofa.d.d.5852]

Always valuable content

[@archangel_one]

0:09 9:44 NOT a CSS only page loader.

[@wisdomugochukwu2249]

Thanks man

[@dcode-software]

You're welcome!

[@mgt1708]

thanks alot

[@chiroaksun8737]

Very nice :D Thx

[@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

[@PeriklesPeriklesoglu]

thanks

[@tpzd1063]

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

[@sulemanmughal5397]

kudos brother

[@stephenoluwafemiherbert]

You are the best

[@homeoffice3524]

Was good until you add js.

[@BenjaminAster]

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

[@angladephil]

Instead of commenting, you should have published a tutorial!

[@softwarelivre2389]

@@angladephil he is making a note. Why would he make a tutorial if he can comment a tip which is faster?

[@M7ilan]

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

[@valona4432]

What font are you using for vs code

[@BenjaminAster]

5:32 I have never understood this .loader--hidden naming convention. Why not just say .loader.hidden and then specify the "hidden" class in JavaScript?

[@dcode-software]

It's BEM. Having it as it's own class means your styles can be specific to the element you are trying to modify (in this case hide)

[@BenjaminAster]

@@dcode-software Ok but why don't just say .loader.hidden instead of .loader--hidden? That would also only apply to a .loader element with the class of .hidden.

[@ck0024]

@@BenjaminAster specificity

[@GravityFrag]

nice thx u

[@dcode-software]

You're welcome!

[@yusufakkurt2308]

Awesome!

[@antonwahyudi2441]

terimakasih, thanks :)

[@brucew4545]

If my site is using a Master Page, do I need to do anything different? I cannot get it to work.

[@CARTOON-d1b6i]

thnks .brdh

[@allanfernz9356]

Is DOMcontenLoaded a better pick instead of windowLoad

[@dcode-software]

DOM Content Loaded triggers once the document has been loaded (like the "skeleton") but Window On Load is when everything is loaded (e.g. includes images)

[@Stallion45]

In regards to the spinner and the page load…, if I have a lot of images on the page, or the visitor is on a slow connection, can I make this loader only display while image content in the view is not loaded…, then display as items further down the page load?

[@smoothbeak]

Lovely!

[@aaronmoroney2066]

is the event listener javascript or jquery? I need to create a loading spinner for a student project but has to be css only

[@dcode-software]

Remember that jQuery is written in JavaScript. Event listeners are part of JavaScript

[@aaronmoroney2066]

@@dcode-software Thank you, I've just noticed in the course brief it says to just make it disappear after three seconds, and not after page load. it's just an intro in css animations I'm studying. thank you for getting back to me so quickly

[@Hyper_Futbuss]

Yeah

[@Syedfarooque280]

Hi sir, my page has showing only image and not loading

[@shahidhsalarzai]

hi should we use javascript cdn? i am facing the following exception Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

[@jamesmassa1999]

Try this => document.body.removeChild(document.body.firstChild);

[@wujeonghyun6865]

Mom, I kinda like this guy.

[@kortisnet2315]

loader--hidden is giving console error "Uncaught TypeError: Cannot read properties of null (reading 'classList')"

[@lvekua]

It removes the loader however console shows following error: Uncaught DOMException: Node.removeChild: The node to be removed is not a child of this node - any suggestions?

[@najmantube]

I had that error too. This worked for me: loader.addEventListener("transitionend", () => { loader.remove() })

[@tyscyre2256]

Why don't you just make the display of the loader to be none after the page has loaded?

[@dcode-software]

So it can fade with transition

[@bryanthompson1070]

Nice simple little loader. Great video, thanks. I had two problems with it though. As mentioned by Lara below, I got the 'failed to removeChild on Node' error message. For some reason, transitionEnd fires twice so the code tries to remove the node after it's already been removed. I fixed this with: loader.addEventListener("transitionend", () => { if (document.querySelector(".loader")) { document.body.removeChild(loader) } }) The second problem was I have some dynamically added text elements (checkmark & x) that were showing through the loader. I fixed this by setting the z-index on .loader to 100.

[@laraliyn]

I solved the problem by adding a seperate js file to the project.But I think according to what I have read, adding script before body in html creates such a problem.I hope this helps.

[@jetalsavani2799]

My page loaded very fast ... that's why loader is not visible...🥲 Then what i have to do ??

[@bryanthompson1070]

@@jetalsavani2799 Go to the network tab of your dev tools and choose throttling. Select slow 3G and you will see the loader.

[@jetalsavani2799]

Thanks ☺️

[@Stallion45]

Nice... same issue here. Thought I was going crazy, but easy fix.

[@michalkichal2436]

class="loader" doesn't change to class="loader loader--hidden" pls help i'm trying to fix this for few hours

[@dean719]

There is an issue with the javascript

[@myriamleclerc846]

I paste everything but when i put the loader--hidden in the html my loading spinner just gets hidden for good. And if i don't put it it's just fixed everywhere. Does anyone has had the same problem??

[@malikzeeshan7365]

yeah same did you get a solution ?

[@laraliyn]

After I added this spinner, everything worked fine. Although loader is removed from page flow, still in the console, "Uncaught DOMException: Failed to execute 'removeChild' on 'Node " error message shows up. Is there anyone has the same problem??

[@bryanthompson1070]

See my comment above

[@jamesmassa1999]

Try this => document.body.removeChild(document.body.firstChild);

[@DaMu24]

does not work

[@Fr0sT_is_Playing]

Cause u're dumb

[@hermankeller1071]

ｐｒｏｍｏｓｍ

[@beegoodb1213]

Thank you sir!