How To Make Website Preloader Using HTML CSS JS | Page Loading, Website Loading Animation

[@ultraprofitabletrader558]

Bro your english is so simple to comprehend it , it is good for another country subs . Thank you very much!

[@yashin8902]

You have added a lot of values in my life....
Thanks for making these videos

[@unitechs1213]

Are you a Variable O.o? As he added values Lmao

[@unknown5482]

@@unitechs1213 lol

[@Minu_Shalom]

Great tutorial :)
if you guys want to add some delay :
window.addEventListener('load', function(load) {
window.removeEventListener('load', load, false);
setTimeout(function(){loader.style.display = 'none'},2000);
},false);

[@aaronator5225]

Thanks bro
I want to disable header when its loading
what should i do?

[@leilus4014]

thank u

[@n3cr0murl0c]

theres a better way to implement a delay for the gif to finish playing, try using
function closepreloader(){
document.getElementById("preloader").style.display = 'none';
}
window.addEventListener("load",function(){
setTimeout(closepreloader, 2000);

});

[@argylleagen]

Thanks a lot Charles

[@VIJAYPRANEESH]

Thanks a lot gentleman,i was searching this for 30mins

[@mayurkumbar589]

thank you🙂

[@mohammedbazzar]

ooo genius ,thanks

[@anandca4096]

Was waiting for this..... Really helpful

[@GreatStackDev]

Thanks Anand, Glad this website preloader tutorial was helpful!

[@muhammadasawirkhan2571]

@@GreatStackDev your way of teaching is awesome! I love it keep it up 🥰🥰😘😘

[@Passorilla]

Great work man! It was super easy to add it on my Shopify store too! Nice!!

[@KChenelle.]

How did you add it to Shopify? What codes do I need exactly?

[@raushanraj_99]

I am searching alots of video but your video is really helpful when I watch it😊

[@GreatStackDev]

Thanks Raushan Bhai

[@sokinmusiqa]

rahmat kattakon juda zo`r. Uzbekistondan alangali salom.

[@melchisedeckbobotsali4163]

Too great, no comment

[@GreatStackDev]

Thanks

[@hasansolak23]

You are the best.

[@GreatStackDev]

No, you are the best Hasan bro

[@hasansolak23]

@@GreatStackDev

[@237legendcomedy4]

You are a genius man ,I have learn from this

[@GreatStackDev]

glad you liked this tutorial to make pre loader for website

[@ashikat4591]

Sir post more JS tutorials.
Thank you

[@spokenenglishmentsbd9998]

straight and direct to the point

[@frontendZone]

LOVE FROM BANGLADESH

[@sudharshini372]

wow its amazing . i search so many videos but only your video give a great result thank you. But i add a multiple in my code it show the image how can i remove please answer.

[@BrutalInsights]

still working and great explanation, a question however : Any tips on how to make a 'fade out' effect after the intro timer is up? Instead of the abrupt instant screen change?

[@AngelineSev]

Hi can you teach me how to make fade out effect?

[@dfavourr]

Did you manage to get this done?

[@BrutalInsights]

@@dfavourr yes, I used gsap; however, there are even more solutions out there. Essentially, you can either create/monitor the state or you can set a specified timer function.

[@dfavourr]

@@BrutalInsights alright thanks

[@Daamilola]

Awesome, straight to the point

[@chantalkuhlon6378]

Very good

[@GreatStackDev]

Thanks Chantal, Glad you like this tutorial to make pre-loader for website

[@aburaihan019]

Really great.
Love from Bangladesh ❤️

[@benedictaakpordu6001]

Excellent tutorial

[@GreatStackDev]

Glad you liked this tutorial to make pre loader for website

[@ibrahimismaila2785]

Such an amazing vedio,so educative

[@GreatStackDev]

Glad you think so!

[@sangeethasancharaya6870]

was very helpful.

[@codehal]

Great Tutorial❤

[@bibhabujarbarua]

What editor r u using!

[@relaxingofreality6821]

It's so easy very convenient to understand love to see this video

[@Wufyiofkes]

As usual, Indians to the rescue. Thank you so much

[@GreatStackDev]

Glad it was helpful! Thank you. 😊

[@mdfahimulislam2503]

Best video for pre loader

[@MelkoR4111]

best explanation. please make a video about btn 'show more'

[@manishsagar486]

I was shocked...I had forwarded the video for 5 times..from 4:40 and I can only see the loading image I thought the vedio is rubbish ..then I came to know that there was a network problem ...🤭...sorry for the pre assumption..by the way the video is so helpful... thankyou

[@GreatStackDev]

Thank you manish bro, Glad you like this preloader tutorial for wbsite

[@majemiteeguonor]

It was very helpful but the video code I copied from RUclips,the video's are showing in my site.plz help 🙏

[@aliabdulrahman8414]

Nice and good,so wonderful

[@GreatStackDev]

Thank you so much 😀

[@batundebabs917]

Fantastic bro, keep it up

[@GreatStackDev]

Thanks, hope you will like this tutorial too: ruclips.net/video/0YFrGy_mzjY/видео.html

[@zahrahasti3723]

Thanks for this tutorial🌷

[@lokeshshivnani2413]

Thankyou very much god bless you

[@tarikulislam8221]

Amazing video

[@GreatStackDev]

Thanks!

[@tarikulislam8221]

@@GreatStackDev welcome

[@davidempire6002]

I think the whole process is great, however I will watch again to grasp knowledge of it.

[@GreatStackDev]

Thanks David, Glad you liked this video to make pre Loader for website

[@saqeebnoorashanavar6634]

Please make a video of JavaScript for beginners......🙏🏻🙏🏻
Please

[@JahidHasan-fh2id]

Awesome

[@GreatStackDev]

Glad you liked it. Thanks for your comment. 😊

[@emmanuelibhawoh7885]

You are the best

[@GreatStackDev]

Glad you liked this tutorial to make pre loading animation for website

[@danishraza612]

It's great and really helpful for my next project in php..

[@GreatStackDev]

Glad this website preloader tutorial helped

[@Eternal.Growth]

Absolutely easy and fantastic

[@shivaaysingh7598]

You're having such a great knowledge 🔥🔥😎.

[@GreatStackDev]

I am beginner like you shivaay bro. Thanks for your comment

[@LuffySheikh05]

@@GreatStackDev agar ap beginner ho to meto abhi paida hi nahi howa wah bahi XD

[@uttamkumargupta6162]

This is open source community 👍👍👍plz try to upload code as well...

[@socapulsekobarid]

I dont understand the thing with youtube links :) I know the page will take longer to load, but I will also see all the youtube links that I inserted into the page...

[@janvidhakad654]

Same question

[@shinigkami]

you can assign a class to the element you placed the links in then set a css property "display: none;" Using the setTimeout function to add a delay would be better though.

[@shankarpubg9413]

​​@@shinigkamiyeah actually I do the same thing it's give me lot of fun

[@atwinedan9364]

this is beautiful teaching

[@mareeuma]

amazing

[@GreatStackDev]

Glad you think so!

[@awesomecharles5494]

great tutorial, direct to the point

[@awesomecharles5494]

thank you so much,

[@louisb.4832]

I have a Question
Great Work.
How do you disable the user to scroll while the preloaded is active because you can scroll anywhere?

[@balamurugan5675]

Super

[@GreatStackDev]

Thanks bala

[@yousefalgith7203]

Good work

[@GreatStackDev]

Thanks Yousef, Glad you liked this tutorial to make pre loader animation for website

[@bgc6468]

your the best!

[@tharakasanjayajayakody8354]

Really helpful........ Thank You ............

[@GreatStackDev]

Thanks for your comment

[@_codeme]

Really helpful at the time of creating big Project😘❤❤

[@alferionjau7783]

Thanks

[@GreatStackDev]

Glad you liked this website preloader design tutorial

[@priyanshudutta9463]

Really Helpful 👍

[@uidairasra]

i love you sir ❤❤❤❤ this teaching

[@GreatStackDev]

glad you like this tutorial to add pre-loader on the website

[@uidairasra]

@@GreatStackDev thank you

[@arfinbipul75]

HelpFull brother....thank you🥰

[@icoder7958]

thanks for great explanation sir...

[@shubhamsaini4871]

You got another subscriber 👍

[@nandopookey9195]

thank you so much sir

[@dvdm1dvdm1]

Great info and this code works perfectly in HTML but when loading a MySQL database the loader does not work while loading the data from the database. Is there a solution for this?

[@mkopke]

Thanks, this was very helpful!

[@saikirannaik8924]

Amazing concept

[@GreatStackDev]

Thanks saikiran, Glad you like this preloader design for website

[@ayaan2281s]

THANK YOU SO MUCH FOR THE VIDEO SO GLAD TO SEE THANKS

[@GreatStackDev]

Thanks to you, Glad you like this website preloader design tutorial

[@prallabroy4454]

I increase the loading time by coding ?

[@alasdeeali5117]

I give you a like because you don't use music.

[@gabriel_bricage]

Thanks man great work !

[@edmartinvilla81]

Great work

[@favourtemidayo4221]

I really appreciate this!!!

[@codewithmaaz]

Perfect Man⚡⚡

[@sarwarhossainhridoy]

Thank you❤

[@yogeshjadon9188]

Very helpful...thanks.

[@GreatStackDev]

Thanks Yogesh, Glad You like this website preloader tutorial

[@BDThunderJAF]

thanks alot. learned a good things

[@ctoid]

Nice tutorial.

[@krishnasinha2583]

nice video

[@Penbyte]

Really helpful

[@TrangLe-dp8jf]

My dream job is to make a website using html css js just like this

[@GreatStackDev]

Good luck for that Trang Le

[@محمودالعثمان-ذ6خ]

Excuse me sir,I want to ask you?
How I can find job as a web designer&developer

[@SalmanShah95]

Wonderful

[@chamansharma3990]

Very nice and good tips

[@GreatStackDev]

Thanks a lot, Glad you like this website preloader design tutorial

[@damilaredc1510]

Grate tutorial❤
Thank you

[@GreatStackDev]

Glad you liked it!

[@petermwansa4890]

Thanks a lot

[@manon3054]

Thank you!

[@muhammadsakibkhan8760]

Brother can you make some tutorials about
shopping cart websitr / website like udemy or lynda player

[@ugifredrick8342]

Thank you for this my Boss👍...
Pls sir I will need you to help make a functional PHP search bar, to search and play videos from mysql database🙏🙏🙏

[@Namaste-Sahu]

Thanks bro.. ❤❤

[@codewithmusha]

Thanku Sir

[@omorfaruk6986]

Please give vanilla JavaScript project video series

[@dimansikora7151]

Cool! Thank you so much!

[@screen-looker]

thanks man youre great!

[@bassemb]

Excellent tutorial, thank you. I made some changes. Also I used your video's embed to test my preloader :)

[@RINKUVERMA-gv6tp]

ruclips.net/video/CMxVKlV_TzE/видео.html
Watch this video

[@ramanujam88]

Thank you. Can you share the video how to create the website visitor counter

[@nhlamulobila1257]

Hi, i followed all the steps to add preloader in my website but i seem not to be reading the gif file. The file path is correct and when i refresh the page it does show black background for like 1-2 seconds but not the loader. what could be the problem?

[@yigitsr]

I had the same problem and I added "/" before src. Voila! Problem solved! Can you try it like that?
It should be url('/src/img/loader.gif')

[@Oom_Prateek]

Sometimes there will be server issues. remove the code and retry.

[@MKSundaram]

hi, thanks for your tutorial. I want a loader animation while my page is trying to get the data from the external source. is it possible?

[@adrianpajer1358]

Buddy! Great video straight to the point, subbed!

[@tajulislam3737]

Thank you man

[@jionshah]

Thanks Man..

[@Artistes_gospel]

Bonjour je viens de like et s'abonner

[@emekachidi4514]

Nice

[@GreatStackDev]

Thanks Emeka, glad you liked this video to make pre loading animation for website

[@joshuaikhine1669]

Is there anothet method of doing it without embedding videos in our website