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.
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.
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.
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?
@@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 !
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.
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!
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'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
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 !
I have been looking for this tutorial series since ages. Thank you so much.
6th video I've randomly stumbled on and dang it I'm subscribing. Great work!
you have uploaded a tutorial that i was looking for. thank you.
The kindest tutorial I have ever seen
You're a good tutor just keep it up Boss, this is one of the best tutorial have ever watched.... Explanation is very clear...
ULTRA USEFULL , just what i wanted , god i just realized i didn't know anything about CSS animation property!!
From Croatia to the Caribbean, thank you man
hope to visit one day!
Thanks for this tutorial. I have been searching this one and i would like to try it.
Pleaseeee keep these videos coming, you're a fantastic teacher!
Thank you Andrew!
The magic is a simple one line in js ? Nice 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.
man you're so funny hope you feel better soon the preloader's a pretty good idea thanks for the tips!
Great tutorial. I hope your feeling better.
Today is actually the worst day...but I ain't stopping. Thank you!
perfect explanation a big thumbs up for your video....
Amazing amazing ed you'r the best thank you soo much
Thanks for the non-jQuery version!
Wow. Supercool. I never do html and css but I understand the concept clearly
Your coding style is awsm little fun and little coding
thank you so much you save lives
Thank you for the great content sir.. your explanations are amazing...
im not a very beginner but a little more. i did this right now. ty
Russia
Really well explained! :)
Another great video 👍👌
Thanks
Love your content
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
Thanks for that. Very useful.
Thanks for taking the time to watch!
@@developedbyed great profile btw.
Excellent....
thank you very much dev
why opacity: 0 and pointer-events: none instead of visibility: hidden or display: none?
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.
cool. can you do a tutorial on lazy loading images.
Have it on my list!
@@developedbyedCongrats on reaching 2K subscribers
thanks dev .
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.
Thanks Bud :)
Awesome!
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?
this amazing, but how can the color of the preload-finish's background is blue, on me is still white
May you make a video on how to create shopping bag(vanila js without jquery)?
where does the preload-finish go in the html?
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?
Thanks Bro
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...
I want to make it related to time not loading ? Could you help me, thanks
Hi, excellent tutorial, just one question. In your app.js preload has dot in front of it and preload-finish doesn't. Why? Thanks
Great tutorial!! Also could please let us know how to create objects using SVG? Thanks
We love you too bro!
19:02 If you just want to know how to get rid.
Ed why do you use opacity:0 to get rid of preloader? Why not display:none or visibilitiy:hidden?
The background arrived section didnt change color for me...
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
Love you too, thank you!
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?
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.
My hard reload is not working...
What can i do?
Great for loading. Have you ever tried linux dude? Think you may enjoy it.
Im tempted...
why other images don't work ,and they are showing with white background
i think so
而你在其中
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
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.
Best!
preloader doesnt fadeout for me
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!
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 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
Video preloader???
Does the window.addEventlistener('load', () =>){//do something}); not work on safari or is it just me?
greet content
Brother, give us a JavaScript live project tutorial
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 😊
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
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
asterisk are indicators of the ROOT
I have a question. What named the program you using in this video?
i follow u ,but can not let it run right.
Nice 666 likes and if someone else comments 69 comments. You have been blessed Ed!
you kinda look like erick the architect
//get rid of preloader after specific time
setTimeout(function () {
FetchData();
}, 2000);
function FetchData() {
const preload = document.querySelector(".preload");
preload.classList.add("preload-finish");
}
Coding Yoga with Ed
Push..and stretch!
claps Only 1 Dislike mmm I think this is by mistakely
join instagram! The clever programmer is on there and so many others!
vezi, ca trebuie 130% nu -130%
From to to From nigga!
wollah someone help me sahbi i dont understand cancer for him😡😡😡😡😡😡😡🤬🤬🤬🤬🤬🤬