Create Your Own Page Pre-Loader (HTML, CSS & JS) (No-jQuery Needed) - Web Design Tutorial

Create Your Personal Web page Pre-Loader (HTML, CSS & JS) (No-jQuery Wanted) – Internet Design Tutorial

by



Hyperlink to supply code:

Web page Loaders like this are a standard pattern these days on web sites, particularly business ones. On this video we have a look at methods to make a customized one from scratch – it is truly fairly easy which you may see as I information you thru it.

It is so simple as making a wrapper, setting an animation after which triggering the animation with Javascript as soon as the web page finishes loading. The most effective half? It is pure HTML, CSS & Javascript. No jQuery or exterior libraries are required to realize this impact.

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

Comply with me on Twitter @dcode!

If this video helped you out and also you’d wish to see extra, ensure that to depart a like and subscribe to dcode!

#dcode #javascript #css

source

47 thoughts on “Create Your Personal Web page Pre-Loader (HTML, CSS & JS) (No-jQuery Wanted) – Internet Design Tutorial”

  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.

    Reply

  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

    Reply

  39. 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>

    Reply

Leave a Comment