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.
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 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.
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.
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.
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
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
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
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.
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?
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.
@@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 !
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.
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!
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
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.
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
//get rid of preloader after specific time setTimeout(function () { FetchData(); }, 2000); function FetchData() { const preload = document.querySelector(".preload"); preload.classList.add("preload-finish"); }
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.
Great comment!
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.
Hey can you please tell how to created those svg paths for the images ?
@@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.
@@PetervandenHeuvel81 thank you man
Hope you enjoy this fun animation!
bro love u
your way of teaching is great............
Chat me boss on WhatsApp +2347067165237
The from and to let’s go ladies killed me ahah! Your videos are amazing!
I've been following you for a few months now. Always great tutos ! I'm learning with fun ! Thank you !
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.
I have been looking for this tutorial series since ages. Thank you so much.
The kindest tutorial I have ever seen
you have uploaded a tutorial that i was looking for. thank you.
6th video I've randomly stumbled on and dang it I'm subscribing. Great work!
The magic is a simple one line in js ? Nice thank you
From Croatia to the Caribbean, thank you man
hope to visit one day!
Great tutorial. I hope your feeling better.
Today is actually the worst day...but I ain't stopping. Thank you!
ULTRA USEFULL , just what i wanted , god i just realized i didn't know anything about CSS animation property!!
Thanks for the non-jQuery version!
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.
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
same...
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
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
@@suyashdhumal3 thanks bro
man you're so funny hope you feel better soon the preloader's a pretty good idea thanks for the tips!
Your coding style is awsm little fun and little coding
You're a good tutor just keep it up Boss, this is one of the best tutorial have ever watched.... Explanation is very clear...
perfect explanation a big thumbs up for your video....
Thanks for this tutorial. I have been searching this one and i would like to try it.
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?
why opacity: 0 and pointer-events: none instead of visibility: hidden or display: none?
thank you so much you save lives
I want to make it related to time not loading ? Could you help me, thanks
cool. can you do a tutorial on lazy loading images.
Have it on my list!
@@developedbyedCongrats on reaching 2K subscribers
Pleaseeee keep these videos coming, you're a fantastic teacher!
Thank you Andrew!
Amazing amazing ed you'r the best thank you soo much
Ed why do you use opacity:0 to get rid of preloader? Why not display:none or visibilitiy:hidden?
Hi, excellent tutorial, just one question. In your app.js preload has dot in front of it and preload-finish doesn't. Why? Thanks
this amazing, but how can the color of the preload-finish's background is blue, on me is still white
im not a very beginner but a little more. i did this right now. ty
Russia
Really well explained! :)
Another great video 👍👌
19:40 Can someone explain me why we use "window.addEventListener..." and not "document.addEventListener" ?
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.
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?
Wow. Supercool. I never do html and css but I understand the concept clearly
Great video.. Just wanna ask one thing.. What theme are you using for visual studio code...? 😂 It looks pretty..
Material theme palenight 😁
Will surely try...
May you make a video on how to create shopping bag(vanila js without jquery)?
where does the preload-finish go in the html?
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.
Love your content
how do you have that reload button on browser have 3 option of refresh?
Right click on that
you must be in inspector to accesses that
Where did you found all those cool images you are using in projects ?
A lot of google searching and if I cannot find something then I will just make it in Illustrator 😀
@@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 !
@@marcoonlinetv7769 Maybe some videos creating illustrations? hmmm
does anyone know how to turn the section background blue?
Thank you for the great content sir.. your explanations are amazing...
My hard reload is not working...
What can i do?
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.
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!
The background arrived section didnt change color for me...
wait ! where is "flight-sky-clouds-fly.jpg" ?
you didn't add that in drop box
hey man thats supposed to be the landing page lol
Great tutorial!! Also could please let us know how to create objects using SVG? Thanks
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.
Same. Just go to pexels and load pic of airplane there
Does the window.addEventlistener('load', () =>){//do something}); not work on safari or is it just me?
Thanks for that. Very useful.
Thanks for taking the time to watch!
@@developedbyed great profile btw.
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
19:02 If you just want to know how to get rid.
thank you very much dev
Great for loading. Have you ever tried linux dude? Think you may enjoy it.
Im tempted...
Excellent....
why other images don't work ,and they are showing with white background
i think so
而你在其中
Thanks
What is the source of your project ideas ? Each of them are special and fun to do :)
I just come up with something in an hour and hope for the best lol.
Video preloader???
thanks dev .
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.
I have a question. What named the program you using in this video?
Thanks Bud :)
Awesome!
preloader doesnt fadeout for me
Wow. it's great video. thanks!
I have a question. i want to express Number (0% ~ 100%)
how to create it~?
I will make a video in the future!
Basically we can't know how much resources are loaded but we can fake that.
Do it 😊
We love you too bro!
Thanks Bro
Brother, give us a JavaScript live project tutorial
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
Love you too, thank you!
Best!
i follow u ,but can not let it run right.
asterisk are indicators of the ROOT
Nice 666 likes and if someone else comments 69 comments. You have been blessed Ed!
greet content
//get rid of preloader after specific time
setTimeout(function () {
FetchData();
}, 2000);
function FetchData() {
const preload = document.querySelector(".preload");
preload.classList.add("preload-finish");
}
you kinda look like erick the architect
Coding Yoga with Ed
Push..and stretch!
vezi, ca trebuie 130% nu -130%
claps Only 1 Dislike mmm I think this is by mistakely
join instagram! The clever programmer is on there and so many others!
From to to From nigga!
wollah someone help me sahbi i dont understand cancer for him😡😡😡😡😡😡😡🤬🤬🤬🤬🤬🤬