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

  Рет қаралды 89,939

Web Dev Tutorials

Web Dev Tutorials

Күн бұрын

Пікірлер: 48
@yamanonagame
@yamanonagame Жыл бұрын
Excellent! This is exactly what I wanted to implement. Thanks!
@matuscesnak6299
@matuscesnak6299 Жыл бұрын
Bro, you dont know how much you helped me!!! thanks
@developershub2024
@developershub2024 9 ай бұрын
Not only you, even me too!
@ChrisWalshZX
@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.
@ajandresiwakwi9882
@ajandresiwakwi9882 Жыл бұрын
this idea was really helpful thank you!
@kamranbayramov8169
@kamranbayramov8169 10 ай бұрын
thanks man short and useful
@anondz2382
@anondz2382 11 ай бұрын
Bro you helped me a lot , thank you
@iGustavoMaster
@iGustavoMaster 10 ай бұрын
Thanks bro, Excellent !
@ahmedhemdan707
@ahmedhemdan707 Жыл бұрын
Very simple and helpful thanks
@maykolandres9280
@maykolandres9280 2 жыл бұрын
Thanks bro, it really helped me!
@developershub2024
@developershub2024 9 ай бұрын
Thank you so much, very helpful content. i will implement this in my Django project!!
@webguy-jd3ml
@webguy-jd3ml 7 ай бұрын
great example - thanks.
@John-wx3zn
@John-wx3zn Жыл бұрын
Thank you. I found that useful.
@raeesshahsani
@raeesshahsani 2 жыл бұрын
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.
@techstreamm-1
@techstreamm-1 7 ай бұрын
Thank you Great Tutorial
@ChrisWalshZX
@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.
@lyricspower123
@lyricspower123 Жыл бұрын
thanks man! this video is very helpful
@TheHassankhattab
@TheHassankhattab 10 ай бұрын
Thank you so much. I'm not a coder, where can I find the source code of this?
@cedriic0
@cedriic0 Жыл бұрын
Thanks bro, you helped me out
@sheikhfarid9715
@sheikhfarid9715 2 жыл бұрын
Thanks Man ❤️
@VanyaSkeedan
@VanyaSkeedan 2 жыл бұрын
Brooooo Thank you, bro Very cool 😎
@kortisnet2315
@kortisnet2315 Жыл бұрын
loader--hidden is giving console error Uncaught TypeError: Cannot read properties of null (reading 'classList')
@ranzethan
@ranzethan 10 ай бұрын
how do i set the loading time? because mine lasts very quickly
@mindacid3274
@mindacid3274 4 ай бұрын
do a settimeout
@shunfa65
@shunfa65 3 ай бұрын
it's helpful , thank you. i 'v subscription too
@InkTaleswithDuke
@InkTaleswithDuke Жыл бұрын
Can you help out My loader isn’t removing from the screen
@septionugroho2366
@septionugroho2366 Жыл бұрын
same here, still spinning till now 🥲
@Melissa-mo2mr
@Melissa-mo2mr Жыл бұрын
what editor you using ? vs code editor or ?
@lucgoeman304
@lucgoeman304 7 ай бұрын
my spiner does not spin and sits in the topleft corner?
@NiyomufashaProsper
@NiyomufashaProsper 6 ай бұрын
Thank you bro
@asalihab
@asalihab Жыл бұрын
That's great, thank you
@popeyee_7877
@popeyee_7877 Жыл бұрын
Can you show how I can put an image in the circle?
@alalyrealestate1136
@alalyrealestate1136 Жыл бұрын
thank you bro .. How to add it while sending form data to record it in mysql database via php script
@geextrix1538
@geextrix1538 2 жыл бұрын
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.
@benjaminaRandriantsoa
@benjaminaRandriantsoa 8 ай бұрын
Thanks bro
@leonardflores6218
@leonardflores6218 2 жыл бұрын
Thanks
@johnnyvlee
@johnnyvlee Жыл бұрын
Just a suggestion but a link to a working codepen would have been really helpful
@funnybubbleco7319
@funnybubbleco7319 24 күн бұрын
Where's the code? its not on your Git
@RCshiat
@RCshiat Жыл бұрын
For anyone getting an error, just replace "document.body.removeChild("loader");" with "loader.remove();".
@jerrytonmoy
@jerrytonmoy Жыл бұрын
You are right brother
@Mohamed_MDJ
@Mohamed_MDJ Жыл бұрын
Ye bcuz removeChild accept node👍
@Manucraft98
@Manucraft98 2 жыл бұрын
Cool man thanks
@codefoxx
@codefoxx 2 жыл бұрын
No problem! and are you referring to lazy loading images?
@Manucraft98
@Manucraft98 2 жыл бұрын
@@codefoxx yeah, both lazy loading and skeleton loading (css) as a temporary replacement. That would be great!
@kyleryxn
@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
@etsnr05 Жыл бұрын
that's the purpose of it, to work when any page loads
@booraq_pegazus
@booraq_pegazus 4 ай бұрын
first thank you for this nice code and please give us a link of the code thank you in advance
Add Preloader HTML CSS & Javascript
9:58
Redhouane Aouadi
Рет қаралды 40 М.
UFC 310 : Рахмонов VS Мачадо Гэрри
05:00
Setanta Sports UFC
Рет қаралды 1,2 МЛН
Мен атып көрмегенмін ! | Qalam | 5 серия
25:41
How To Create Skeleton Loading Animation With CSS
9:59
Web Dev Simplified
Рет қаралды 304 М.
Award Winning Animation With Only 20 Lines Of CSS?
6:59
Hyperplexed
Рет қаралды 1,9 МЛН
Use Spinner and Create Page Loader in Bootstrap 5
8:23
ByteGrad
Рет қаралды 19 М.
Color Changing Shiny Loader using HTML & CSS
4:32
CodingNepal
Рет қаралды 79 М.
How To Load Images Like A Pro
15:48
Web Dev Simplified
Рет қаралды 394 М.
Subtle, yet Beautiful Scroll Animations
5:04
Beyond Fireship
Рет қаралды 1,8 МЛН
UFC 310 : Рахмонов VS Мачадо Гэрри
05:00
Setanta Sports UFC
Рет қаралды 1,2 МЛН