How to Add Loading Animation to Website in 2 Minutes!

Articles, Blog

How to Add Loading Animation to Website in 2 Minutes!

How to Add Loading Animation to Website in 2 Minutes!


hello and welcome to red stapler channel
in this video I’m going to show you how to add a preloader animation to your
website and remove it when everything is loaded ready let’s check it out so here
is our example page just a div with an image but this is not just a regular
image it’s a random image from external source that changed every time you
refresh this is to prevent a browser from caching it so we can simulate a
loading time on local server checkout picsum.photos if you are
interested and here’s the loader I found on codepen that I want to add to my
website I’m going to copy over the code for both HTML and CSS and then create a
wrapper around it I want a loader to cover the entire page
when it’s loading so I will set the width and height to 100% then set the
position to absolute and zero top left also add background color as well the original code is using 50% top to center the loader I will remove it and use flex
layout instead okay the loader is ready next we will
hide it when the loading is completed we can do that by listening to window load
event which will trigger when all the elements have been completely loaded then use jQuery fade-out method to hide
the loader and that’s it very simple and straightforward but if you have a
dynamic content you might have to handle this differently depending on your
website if you love this video don’t forget to
like or subscribe to stay tuned for more thanks for watching and see you next
time bye

22 thoughts on How to Add Loading Animation to Website in 2 Minutes!

  1. cool, i was wondering how this was done. obviously I wouldn't use jquery, but the logic seems so obvious now 🙂 how does this affect google ranking? does google take this to be a meaningful paint and rank you better, or does it know this is not what the user came for and waits for the real page? I guess I could test that, no need to ask you, so I guess I'm just rumbling now 😀

  2. After watching your video on the loaders themselves I decided to try them myself using some basic JS, but it's nice to see your approach!

  3. You just showed what I was searching for.
    can you please show me how to do this kind of cutting effect https://colorlib.com/etc/cs/comingsoon_01/index.html

  4. Can I ask if how to do this one if..lets take this case.. after I click the login button then it loads.. how can I direct this to my homepage? Thanks for the response

  5. I had wanted to add a loader for a long time but couldnt get it to work. Thanks for this easy and good tutorial:)

Leave a Reply

Your email address will not be published. Required fields are marked *