Link to source code:
https://codepen.io/dcode-software/pen/NEErgO

Page Loaders like this are a common trend nowadays on websites, especially commercial ones. In this video we look at how to make a custom one from scratch – it’s actually quite simple which you’ll see as I guide you through it.

It’s as simple as creating a wrapper, setting an animation and then triggering the animation with Javascript once the page finishes loading. The best part? It’s pure HTML, CSS & Javascript. No jQuery or external libraries are required to achieve this effect.

0:00 Overview
0:32 Adding HTML and images
2:22 Writing the CSS
6:29 Writing the JavaScript
9:05 Wrapping up

Follow me on Twitter @dcode!

If this video helped you out and you’d like to see more, make sure to leave a like and subscribe to dcode!

#dcode #javascript #css

source

42 Comments

  2. Hey there, I'm having an issue with when the user hits the back button on the next page, the loader doesn't disappear. As of right now I have the loader unhiding when the user hits a submit button.

  6. This did not work for me for some reason. It stays on for a second and then disappears. It does not wait for the page to load completely. I did everything that you did so I'm a little confused here.

  9. many thanks for sharing.
    the only limitation is the square background of the gif file, this is another reason why it's better to work with svg files.
    but I don't know how to animate svg files.

  11. Thank you for the video. I searched a whole night. Arround 12 hours, to make a loading animation. And your video saved me.He helped me understand how to do it and it worked. Thx for the video

  20. WTF!!!

    What a useless feature! Why would anyone need their website to load slower, to just show off a LOADER gif!!!

    Besides, you are missing out on async-await world of JS completely! A Totally bad practice.

  28. Sir I beg u sir…please reply me…it's very urgent …loader got suucessfully run…but it is coming and going very fast sir….and we also cant tell to client , that slow down your browser to 3g…so please reply me…..where to add command for making it appear for at least 3 sec on page

  40. I took this one step further to use it as a "IsBusy" indicator for ASP.NET Core MVC:

    …
    <div class="form-group">

    <input type="submit" value="Save" id="btnSave" class="btn btn-primary" onclick="showIsBusy()" />

    <input type="button" value="Cancel" id="btnCancel" onclick="history.go(-1)" class="btn" />

    </div>

    </form>

    </div>

    </div>

    <div class="isbusy" id="isbusy">

    <img src="~/images/IsBusy.gif" alt="Processing…"/>

    </div>

    <script>

    $(document).ready(function () {

    $("#isbusy").hide();

    });

    function showIsBusy() {

    //alert("isBusy");

    $("#isbusy").show();

    $("form").submit();

    }

    </script>

Leave A Reply

Please enter your comment!
Please enter your name here