How to create a CSS Preloader Animation With Javascript Tutorial | Javascript Preloader Tutorial

[@PetervandenHeuvel81]

I would change the clouds to inline SVG, and use a inline-css in the to improve the loading and rendering of the preloader. If you have to use network-links, then 'resource hints' help speed things up.

[@developedbyed]

Great comment!

[@PetervandenHeuvel81]

I've made an example for your users; codepen.io/petervandenheuvel/pen/ywBxxY. It's a bit too fast, so you might want to add a delay. Another website I use when making a preloader is this one: www.sitelocity.com/critical-path-css-generator. If you have a preloader, you want the CSS there as fast as possible, and do no network-requests at all. You might even want to include your JavaScript inline in the top of the document. I know, usually bad practice, but your preloader is a good exeception for this.

[@madhavjha5289]

Hey can you please tell how to created those svg paths for the images ?

[@PetervandenHeuvel81]

@@madhavjha5289 Sorry Sir, didn't notice your message until now. You've used Adobe Illustrator to open the .eps / SVG file, and pasted the markup with 'save as SVG' and 'show markup' button.

[@DruideRC]

@@PetervandenHeuvel81 thank you man

[@developedbyed]

Hope you enjoy this fun animation!

[@thejoker5298]

bro love u

[@thejoker5298]

your way of teaching is great............

[@rotimiidowu6848]

Chat me boss on WhatsApp [phone]

[@pascalelacome1616]

I've been following you for a few months now. Always great tutos ! I'm learning with fun ! Thank you !

[@RobertWildling]

Nice design! But... If the preloader div is not removed after preloading, the keyframe animations keep running, which is a waste of processes. Therefore it would be advisable to remove the preloader div, once the transition to opacity 0 is done. Simply put an addEventListener on the preloader that listens to transitionend, then remove the preloader div.

[@wonderlandsfoodie]

The from and to let’s go ladies killed me ahah! Your videos are amazing!

[@husseineid7885]

I have been looking for this tutorial series since ages. Thank you so much.

[@NychroneIB]

6th video I've randomly stumbled on and dang it I'm subscribing. Great work!

[@notratulshariar]

you have uploaded a tutorial that i was looking for. thank you.

[@rotimiidowu6848]

You're a good tutor just keep it up Boss, this is one of the best tutorial have ever watched.... Explanation is very clear...

[@gopnikdj]

The kindest tutorial I have ever seen

[@arianbagheri7137]

ULTRA USEFULL , just what i wanted , god i just realized i didn't know anything about CSS animation property!!

[@bythealphabet]

From Croatia to the Caribbean, thank you man

[@developedbyed]

hope to visit one day!

[@remax110]

Great tutorial. I hope your feeling better.

[@developedbyed]

Today is actually the worst day...but I ain't stopping. Thank you!

[@imandrew4966]

Pleaseeee keep these videos coming, you're a fantastic teacher!

[@developedbyed]

Thank you Andrew!

[@thebmusproject]

Thanks for the non-jQuery version!

[@BroMacCIA]

The magic is a simple one line in js ? Nice thank you

[@edrianmansilungan8089]

Thanks for this tutorial. I have been searching this one and i would like to try it.

[@jasonmiles7502]

man you're so funny hope you feel better soon the preloader's a pretty good idea thanks for the tips!

[@rkavi53]

Wow. Supercool. I never do html and css but I understand the concept clearly

[@to_serveMyNation]

Your coding style is awsm little fun and little coding

[@gustavbrolin623]

Could you be kind and mail me the code, I think I've messed something up, because I can't get rid of the loading screen. Which results in the "page" not appearing.

[@ТюзМайский]

im not a very beginner but a little more. i did this right now. ty Russia

[@mohammedelhoussni]

Amazing amazing ed you'r the best thank you soo much

[@atomicpx]

This is so great! Could you explain how to do this only once per session so that you don't get this every time you load the page?

[@LENTECH]

perfect explanation a big thumbs up for your video....

[@thelifeofmoom5794]

thank you so much you save lives

[@danyramchandra444]

Thank you for the great content sir.. your explanations are amazing...

[@chinmaybhogaonkar]

Thanks

[@team4b68]

Really well explained! :)

[@SirSW33TY]

May you make a video on how to create shopping bag(vanila js without jquery)?

[@kris10an64]

Another great video 👍👌

[@bhaskarrajchauhan7861]

thanks dev .

[@damianperera927]

Love your content

[@xlu125]

Hi, excellent tutorial, just one question. In your app.js preload has dot in front of it and preload-finish doesn't. Why? Thanks

[@sravankumar6974]

Great tutorial!! Also could please let us know how to create objects using SVG? Thanks

[@John-du4wf]

thank you very much dev

[@bikramchettri9405]

cool. can you do a tutorial on lazy loading images.

[@developedbyed]

Have it on my list!

[@bikramchettri9405]

​@@developedbyed​Congrats on reaching 2K subscribers

[@indosharing5475]

this amazing, but how can the color of the preload-finish's background is blue, on me is still white

[@Micsc]

Thanks for that. Very useful.

[@developedbyed]

Thanks for taking the time to watch!

[@Micsc]

@@developedbyed great profile btw.

[@cromaticoagency3177]

awesome content !!! thanks !!! I have a question in the case that I want the animation to load every time the website is accessed. How could I do that?

[@aleksd286]

why opacity: 0 and pointer-events: none instead of visibility: hidden or display: none?

[@dipanshparmar3769]

Thanks Bud :)

[@MiguelGonzalez-eb9lj]

My Thing loads to fast, doesn't even give me enough time to see the animation what did i do wrong? also the section with the arrive header and image the background wont change color

[@GintasLtu]

same...

[@suyashdhumal3]

Because in the intro he styled it but in the tutorial he didn't. Fair enough because this is a preloader tutorial and not a website tutorial.... And for the fast loading thing 21:35

[@suyashdhumal3]

if you want everyone to see it for say... 5 seconds then put setTimeout(function () { preload.classList.add("preload-finish"); }, 5000); in the window onload eventlistener

[@umityasarturk6424]

@@suyashdhumal3 thanks bro

[@artsbrand]

We love you too bro!

[@omorfaruk6986]

Brother, give us a JavaScript live project tutorial

[@OmarMaciasarevalo]

Excellent....

[@desequilibradoo]

Ed why do you use opacity:0 to get rid of preloader? Why not display:none or visibilitiy:hidden?

[@mellow_studio23]

Thanks Bro

[@thehardyboiz1]

Awesome!

[@Godisbetter909]

Love you too, thank you!

[@ahmedchouihi]

I want to make it related to time not loading ? Could you help me, thanks

[@wagnermartins6873]

I did take thousands of years to listen u to tell that shift + alt down or up copy the lines, i really wanted to know this shortcut but never found lmaooo

[@sagarjasani7622]

Great video.. Just wanna ask one thing.. What theme are you using for visual studio code...? 😂 It looks pretty..

[@developedbyed]

Material theme palenight 😁

[@sagarjasani7622]

Will surely try...

[@yasazaheen]

For me the slow 3G was too fast and I couldn't see the animation properly. So I added a custom profile and set the upload and download speed to 5ms and latency to 2ms. If anyone had this same problem you can add this custom network profile and your problem should be solved.

[@HostDotPromo]

Great for loading. Have you ever tried linux dude? Think you may enjoy it.

[@developedbyed]

Im tempted...

[@gauravborra1]

For actual use case : i have a long page website then how to restrict users to scroll to bottom of website from behind the preload overlay ? it will be disaster if user lands on middle of page Please anyone help.

[@vermstella2964]

Best!

[@user-zp1dv4yh5e]

wait ! where is "flight-sky-clouds-fly.jpg" ? you didn't add that in drop box

[@AbdulKhan-nx8mk]

hey man thats supposed to be the landing page lol

[@ckhit]

Does the window.addEventlistener('load', () =>){//do something}); not work on safari or is it just me?

[@shargenezangana9320]

Hello, first I would like to thank you for your work! You have helped me so much through my projects! With my preloader everything works great however after it finishes fading out. I can not click on any links on my hero page. Any help would be appreciated.

[@shargenezangana9320]

Nevermind! I found solution in the comments that the answer is at 19:02. I did the preloader prior to this video, then came across my issue. If you watched other videos you made the same mistake as I did. I did not come to this channel first!

[@caelim3524]

I'm starting to build websites for people. I'm currently building one for myself and I built one for a friend. I use django, html, css, bootstrap, and jquery to make sites. I was wondering how much I should charge a client? Hopefully I will eventually be paid to create a website for someone and I don't know how much I should charge. I'm a complete begginner and 1 person so it shouldn't be too much but I also don't want to get short changed

[@MiguelGonzalez-eb9lj]

where does the preload-finish go in the html?

[@esraamahmmoud1607]

greet content

[@MiguelGonzalez-eb9lj]

The background arrived section didnt change color for me...

[@radanmitasik8793]

What is the source of your project ideas ? Each of them are special and fun to do :)

[@developedbyed]

I just come up with something in an hour and hope for the best lol.

[@nexpid]

I have a question. What named the program you using in this video?

[@marcoonlinetv7769]

Where did you found all those cool images you are using in projects ?

[@developedbyed]

A lot of google searching and if I cannot find something then I will just make it in Illustrator 😀

[@marcoonlinetv7769]

@@developedbyed I guess I thought on your images made in illustrator. They are awesome! I hope you make it available in new projects you create ! Keep good work !

[@developedbyed]

@@marcoonlinetv7769 Maybe some videos creating illustrations? hmmm

[@DJMpro1999]

Nice 666 likes and if someone else comments 69 comments. You have been blessed Ed!

[@MiguelGonzalez-eb9lj]

does anyone know how to turn the section background blue?

[@khbipu2977]

My hard reload is not working... What can i do?

[@NERO-ez1mn]

asterisk are indicators of the ROOT

[@mr.magicalbanana2126]

I don't know why but for me in the Dropbox i can only see two images can you post the files somewhere please thank you.

[@mikatiihonen]

Same. Just go to pexels and load pic of airplane there

[@INKWEON7269]

Wow. it's great video. thanks! I have a question. i want to express Number (0% ~ 100%) how to create it~?

[@developedbyed]

I will make a video in the future!

[@varaprasadhalajangi8200]

Basically we can't know how much resources are loaded but we can fake that.

[@roope8668]

Do it 😊

[@sivakrishna6682]

19:02 If you just want to know how to get rid.

[@kafin3504]

how do you have that reload button on browser have 3 option of refresh?

[@varaprasadhalajangi8200]

Right click on that

[@alexjansson7816]

you must be in inspector to accesses that

[@shinrakeyp]

19:40 Can someone explain me why we use "window.addEventListener..." and not "document.addEventListener" ?

[@khbipu2977]

Because load is a window function If we want to add event in our html file then we use document. But when we add event in window function like load unload scroll etc then we use window.

[@ahmedchouihi]

//get rid of preloader after specific time setTimeout(function () { FetchData(); }, 2000); function FetchData() { const preload = document.querySelector(".preload"); preload.classList.add("preload-finish"); }

[@appelsap45]

you kinda look like erick the architect

[@user-zp1dv4yh5e]

why other images don't work ,and they are showing with white background

[@jennyll8526]

i think so 而你在其中

[@kimarieldequilla9586]

preloader doesnt fadeout for me

[@madhan5791]

Video preloader???

[@jennyll8526]

i follow u ,but can not let it run right.

[@StarcoreLabs]

Coding Yoga with Ed

[@developedbyed]

Push..and stretch!

[@LabhamJain]

claps Only 1 Dislike mmm I think this is by mistakely

[@PS-le4mf]

join instagram! The clever programmer is on there and so many others!

[@enffinity420]

vezi, ca trebuie 130% nu -130%

[@kupaporusku]

From to to From nigga!

[@zaydessaidi4768]

wollah someone help me sahbi i dont understand cancer for him😡😡😡😡😡😡😡🤬🤬🤬🤬🤬🤬