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

In this tutorial, you'll learn how to create and show a loading spinner until the page has finished loading.

Sponsor me on GitHub!

Follow my blog:

[yamanonagame]

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

[ajandresiwakwi]

this idea was really helpful thank you!

[lyricspower]

thanks man! this video is very helpful

[ahmedhemdan]

Very simple and helpful thanks <3 <3

[matuscesnak]

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

[developershub]

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, 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.

[alalyrealestate]

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

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

[TheHassankhattab]

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

[Melissa-momr]

what editor you using ? vs code editor or ?

[popeyee_]

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

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

[kortisnet]

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

[geextrix]

I keep getting errors on Put my loader right after body and used this Great tut, btw.

[ranzethan]

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

[Manucraft]

Cool man thanks <3
Could you also show us how to add a skeleton loading on multiple images?

With or Without jQuery.
It would be great ☺️

[lucgoeman]

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

[MarkcDuke]

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

[johnnyvlee]

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