How to Create and Display a Loading Spinner on Page Load (without JQuery) - HTML, CSS & JavaScript

[@yamanonagame]

Excellent! This is exactly what I wanted to implement. Thanks!

[@ChrisWalshZX]

5:40 The removeChild() parameter shouldn't be in quotes. You are removing the DOM element, but a string that happens to have the same name.

[@TheHassankhattab]

Thank you so much. I'm not a coder, where can I find the source code of this?

[@matuscesnak6299]

Bro, you dont know how much you helped me!!! thanks

[@developershub2024]

Not only you, even me too!

[@ajandresiwakwi9882]

this idea was really helpful thank you!

[@ChrisWalshZX]

Don't you need the spinner to appear when "leaving" a page as by the time the new page has started to load in and the "load" event has fired, you've already done most of the waiting? For a web portal, we need to sometimes do timely operations getting data prior to presenting the page (document) to the browser. Let me know what you think. Thanks.

[@ahmedhemdan707]

Very simple and helpful thanks

[@anondz2382]

Bro you helped me a lot , thank you

[@developershub2024]

Thank you so much, very helpful content. i will implement this in my Django project!!

[@raeesshahsani]

Hey there, the code is perfectly working, except for the statement where it is mentioned, document.body.removeChild("loader"); The browser would throw error: Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

[@kamranbayramov8169]

thanks man short and useful

[@maykolandres9280]

Thanks bro, it really helped me!

[@iGustavoMaster]

Thanks bro, Excellent !

[@kortisnet2315]

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

[@Melissa-mo2mr]

what editor you using ? vs code editor or ?

[@webguy-jd3ml]

great example - thanks.

[@John-wx3zn]

Thank you. I found that useful.

[@techstreamm-1]

Thank you Great Tutorial

[@lyricspower123]

thanks man! this video is very helpful

[@InkTaleswithDuke]

Can you help out My loader isn’t removing from the screen

[@septionugroho2366]

same here, still spinning till now 🥲

[@ranzethan]

how do i set the loading time? because mine lasts very quickly

[@mindacid3274]

do a settimeout

[@sheikhfarid9715]

Thanks Man ❤️

[@shunfa65]

it's helpful , thank you. i 'v subscription too

[@alalyrealestate1136]

thank you bro .. How to add it while sending form data to record it in mysql database via php script

[@cedriic0]

Thanks bro, you helped me out

[@VanyaSkeedan]

Brooooo Thank you, bro Very cool 😎

[@geextrix1538]

I keep getting errors on document.body.removeChild("loader"). Put my loader right after body and used this document.body.removeChild(document.body.firstChild). Great tut, btw.

[@lucgoeman304]

my spiner does not spin and sits in the topleft corner?

[@popeyee_7877]

Can you show how I can put an image in the circle?

[@johnnyvlee]

Just a suggestion but a link to a working codepen would have been really helpful

[@asalihab]

That's great, thank you

[@NiyomufashaProsper]

Thank you bro

[@benjaminaRandriantsoa]

Thanks bro

[@leonardflores6218]

Thanks

[@Manucraft98]

Cool man thanks

[@codefoxx]

No problem! and are you referring to lazy loading images?

[@Manucraft98]

@@codefoxx yeah, both lazy loading and skeleton loading (css) as a temporary replacement. That would be great!

[@kyleryxn]

Doesn't work me for, the loader appears as soon as the first page loads, without me clicking a link. Full source code wold help

[@etsnr05]

that's the purpose of it, to work when any page loads

[@booraq_pegazus]

first thank you for this nice code and please give us a link of the code thank you in advance

[@RCshiat]

For anyone getting an error, just replace "document.body.removeChild("loader");" with "loader.remove();".

[@jerrytonmoy]

You are right brother

[@Mohamed_MDJ]

Ye bcuz removeChild accept node👍