how to create assets loading animation on webpage

Question

I want to create some sort of animation or preloader while my webpage loads.

My web page is having a lot of external assets(cdn, css, js, fonts, images), I want to display name of the asset which the browser is currently downloading and also a progress bar indicating how much of the total no of assets present in the page got downloaded.

How ever using the code below will not help because the event will be triggered only after the page completely downloaded.

$(document).on("pageload",function(){
     //animation stops
});

showing/hiding animation is possible but not sure about showing the resource loaded % age. — techie_28, Mar 30 '16 at 09:57
http://stackoverflow.com/questions/4999703/preload-with-percentage-javascript-jquery — techie_28, Mar 30 '16 at 10:01
One more link http://greensock.com/forums/topic/10115-get-percent-of-images-loaded-on-page-for-tweening-preloader/ — techie_28, Mar 30 '16 at 10:04

score 0 · Answer 1 · answered Mar 30 '16 at 12:53

Finally I figured one way which almost gives solution to the problem.
Write a onload attribute inside the assets which you are loading and call a javascript method. Inside the javascript method we can display the assets which are being loaded currently(with the animation).
Below i have loaded the javascript from CDN link and while it's getting loaded it can be printed on the page along with animation.

<body>
  <div id='myDIV' class="loader"> </div>
  <div id='message'>
    <ul id="asset">

    </ul>
    <script onload="myFunction('jquery loaded...')" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
   <script onload="myFunction('angular js loaded...')"src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
   <script onload="myFunction('bootstrap js loaded')"type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>

And the JavaScript function can be

function myFunction(ele) {
    var node = document.createElement("LI");
    var textnode = document.createTextNode(ele); 
    node.appendChild(textnode);
    document.getElementById("asset").appendChild(node);
}

Similarly we can print what is being loaded while downloading the images, css files, fonts etc.

score -2 · Answer 2 · edited Nov 07 '22 at 14:24

-2

You could use Font Awesome icons.

Check out their spinning icons.

This means you can stop the icon from spinning by removing the fa-spin class from the DOM.

eg:

HTML

<i id="loadingIcon" class="fa fa-spinner fa-spin"></i>

JS

$(document).ready(function() {
  $('#loadingIcon').removeClass('fa-spin');
});

Also, to display assets being loaded, you can use an onload attribute in your HTML.

<script src="someSource.js" onload="myCallback()">

edited Nov 07 '22 at 14:24

TylerH

20,799
66
75
101

answered Mar 30 '16 at 08:04

Rhys Bradbury

1,699
13
24

He wants this: `I want to display name of the asset the browser is currently downloading and also a progress bar indicating how much of the total no of assets present in the page got downloaded.` – node_modules Mar 30 '16 at 08:14
@Rhys Bradbury exactly as C0dekid.php says, I want to display what assets are being loaded. – vikas kv Mar 30 '16 at 09:31
1

My answer has been updated. Please be fair and un-down-vote, as my answer is answering the question. – Rhys Bradbury Mar 30 '16 at 14:47
Could someone please tell me how I can improve my answer, to reverse the down voting. – Rhys Bradbury Apr 01 '16 at 08:21

how to create assets loading animation on webpage

2 Answers2