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

Поділитися
Вставка
  • Опубліковано 24 гру 2024

КОМЕНТАРІ •

  • @PetervandenHeuvel81
    @PetervandenHeuvel81 5 років тому +29

    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
      @developedbyed  5 років тому +8

      Great comment!

    • @PetervandenHeuvel81
      @PetervandenHeuvel81 5 років тому +5

      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
      @madhavjha5289 5 років тому +1

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

    • @PetervandenHeuvel81
      @PetervandenHeuvel81 5 років тому +2

      @@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
      @DruideRC 5 років тому

      @@PetervandenHeuvel81 thank you man

  • @developedbyed
    @developedbyed  5 років тому +54

    Hope you enjoy this fun animation!

  • @wonderlandsfoodie
    @wonderlandsfoodie 5 років тому +12

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

  • @pascalelacome1616
    @pascalelacome1616 5 років тому +7

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

  • @RobertWildling
    @RobertWildling 4 роки тому +2

    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.

  • @husseineid7885
    @husseineid7885 4 роки тому +1

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

  • @gopnikdj
    @gopnikdj 4 роки тому

    The kindest tutorial I have ever seen

  • @notratulshariar
    @notratulshariar 5 років тому +5

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

  • @NychroneIB
    @NychroneIB 5 років тому +1

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

  • @BroMacCIA
    @BroMacCIA 3 роки тому

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

  • @bythealphabet
    @bythealphabet 5 років тому

    From Croatia to the Caribbean, thank you man

  • @remax110
    @remax110 5 років тому +2

    Great tutorial. I hope your feeling better.

    • @developedbyed
      @developedbyed  5 років тому +1

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

  • @arianbagheri7137
    @arianbagheri7137 4 роки тому

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

  • @thebmusproject
    @thebmusproject 4 роки тому +1

    Thanks for the non-jQuery version!

  • @gustavbrolin623
    @gustavbrolin623 4 роки тому +2

    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.

  • @MiguelGonzalez-eb9lj
    @MiguelGonzalez-eb9lj 5 років тому +3

    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
      @GintasLtu 4 роки тому +1

      same...

    • @suyashdhumal3
      @suyashdhumal3 4 роки тому

      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
      @suyashdhumal3 4 роки тому +1

      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
      @umityasarturk6424 3 роки тому

      @@suyashdhumal3 thanks bro

  • @jasonmiles7502
    @jasonmiles7502 5 років тому +2

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

  • @to_serveMyNation
    @to_serveMyNation 2 роки тому

    Your coding style is awsm little fun and little coding

  • @rotimiidowu6848
    @rotimiidowu6848 4 роки тому

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

  • @LENTECH
    @LENTECH 5 років тому

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

  • @edrianmansilungan8089
    @edrianmansilungan8089 5 років тому +1

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

  • @atomicpx
    @atomicpx 2 роки тому

    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?

  • @aleksd286
    @aleksd286 5 років тому +1

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

  • @thelifeofmoom5794
    @thelifeofmoom5794 3 роки тому

    thank you so much you save lives

  • @ahmedchouihi
    @ahmedchouihi 3 роки тому

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

  • @bikramchettri9405
    @bikramchettri9405 5 років тому +1

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

  • @imandrew4966
    @imandrew4966 5 років тому

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

  • @mohammedelhoussni
    @mohammedelhoussni 2 роки тому

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

  • @desequilibradoo
    @desequilibradoo 5 років тому

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

  • @xlu125
    @xlu125 4 роки тому

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

  • @indosharing5475
    @indosharing5475 4 роки тому

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

  • @ТюзМайский
    @ТюзМайский 5 років тому

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

  • @team4b68
    @team4b68 5 років тому

    Really well explained! :)

  • @kris10an64
    @kris10an64 5 років тому +1

    Another great video 👍👌

  • @shinrakeyp
    @shinrakeyp 4 роки тому

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

    • @khbipu2977
      @khbipu2977 4 роки тому

      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.

  • @cromaticoagency3177
    @cromaticoagency3177 5 років тому

    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?

  • @rkavi53
    @rkavi53 5 років тому

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

  • @sagarjasani7622
    @sagarjasani7622 5 років тому +1

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

  • @SirSW33TY
    @SirSW33TY 5 років тому +1

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

  • @MiguelGonzalez-eb9lj
    @MiguelGonzalez-eb9lj 5 років тому

    where does the preload-finish go in the html?

  • @gauravborra1
    @gauravborra1 4 роки тому

    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.

  • @damianperera927
    @damianperera927 4 роки тому

    Love your content

  • @kafin3504
    @kafin3504 5 років тому

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

  • @marcoonlinetv7769
    @marcoonlinetv7769 5 років тому

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

    • @developedbyed
      @developedbyed  5 років тому

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

    • @marcoonlinetv7769
      @marcoonlinetv7769 5 років тому

      @@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
      @developedbyed  5 років тому

      @@marcoonlinetv7769 Maybe some videos creating illustrations? hmmm

  • @MiguelGonzalez-eb9lj
    @MiguelGonzalez-eb9lj 5 років тому

    does anyone know how to turn the section background blue?

  • @danyramchandra444
    @danyramchandra444 4 роки тому

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

  • @khbipu2977
    @khbipu2977 4 роки тому

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

  • @shargenezangana9320
    @shargenezangana9320 3 роки тому

    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
      @shargenezangana9320 3 роки тому

      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!

  • @MiguelGonzalez-eb9lj
    @MiguelGonzalez-eb9lj 5 років тому

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

  • @user-zp1dv4yh5e
    @user-zp1dv4yh5e 5 років тому +1

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

    • @AbdulKhan-nx8mk
      @AbdulKhan-nx8mk 4 роки тому

      hey man thats supposed to be the landing page lol

  • @sravankumar6974
    @sravankumar6974 5 років тому

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

  • @mr.magicalbanana2126
    @mr.magicalbanana2126 5 років тому +2

    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
      @mikatiihonen 4 роки тому

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

  • @ckhit
    @ckhit 5 років тому

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

  • @Micsc
    @Micsc 5 років тому

    Thanks for that. Very useful.

    • @developedbyed
      @developedbyed  5 років тому +1

      Thanks for taking the time to watch!

    • @Micsc
      @Micsc 5 років тому

      @@developedbyed great profile btw.

  • @caelim3524
    @caelim3524 4 роки тому

    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

  • @sivakrishna6682
    @sivakrishna6682 4 роки тому +1

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

  • @John-du4wf
    @John-du4wf 5 років тому

    thank you very much dev

  • @HostDotPromo
    @HostDotPromo 5 років тому +1

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

  • @OmarMaciasarevalo
    @OmarMaciasarevalo 4 роки тому

    Excellent....

  • @user-zp1dv4yh5e
    @user-zp1dv4yh5e 5 років тому

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

  • @chinmaybhogaonkar
    @chinmaybhogaonkar 3 роки тому +1

    Thanks

  • @radanmitasik8793
    @radanmitasik8793 5 років тому +1

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

    • @developedbyed
      @developedbyed  5 років тому

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

  • @madhan5791
    @madhan5791 4 роки тому

    Video preloader???

  • @bhaskarrajchauhan7861
    @bhaskarrajchauhan7861 4 роки тому

    thanks dev .

  • @yasazaheen
    @yasazaheen 4 роки тому

    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.

  • @nexpid
    @nexpid 5 років тому

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

  • @dipanshparmar3769
    @dipanshparmar3769 4 роки тому

    Thanks Bud :)

  • @thehardyboiz1
    @thehardyboiz1 5 років тому

    Awesome!

  • @kimarieldequilla9586
    @kimarieldequilla9586 4 роки тому

    preloader doesnt fadeout for me

  • @INKWEON7269
    @INKWEON7269 5 років тому

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

  • @artsbrand
    @artsbrand 5 років тому

    We love you too bro!

  • @mellow_studio23
    @mellow_studio23 3 роки тому

    Thanks Bro

  • @omorfaruk6986
    @omorfaruk6986 4 роки тому

    Brother, give us a JavaScript live project tutorial

  • @wagnermartins6873
    @wagnermartins6873 4 роки тому

    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

  • @Godisbetter909
    @Godisbetter909 4 роки тому

    Love you too, thank you!

  • @vermstella2964
    @vermstella2964 2 роки тому

    Best!

  • @jennyll8526
    @jennyll8526 2 роки тому

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

  • @NERO-ez1mn
    @NERO-ez1mn 5 років тому

    asterisk are indicators of the ROOT

  • @DJMpro1999
    @DJMpro1999 5 років тому

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

  • @esraamahmmoud1607
    @esraamahmmoud1607 5 років тому

    greet content

  • @ahmedchouihi
    @ahmedchouihi 3 роки тому

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

  • @appelsap45
    @appelsap45 4 роки тому

    you kinda look like erick the architect

  • @StarcoreLabs
    @StarcoreLabs 5 років тому

    Coding Yoga with Ed

  • @enffinity420
    @enffinity420 4 роки тому

    vezi, ca trebuie 130% nu -130%

  • @LabhamJain
    @LabhamJain 5 років тому

    claps Only 1 Dislike mmm I think this is by mistakely

  • @PS-le4mf
    @PS-le4mf 5 років тому

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

  • @kupaporusku
    @kupaporusku 5 років тому

    From to to From nigga!

  • @zaydessaidi4768
    @zaydessaidi4768 9 місяців тому

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