How get a progress bar load body content and hide at 100%?

问题

i am searching a way to get a progress bar that load my body files, and be synchronize with it like when all my body has been load my progress bar is at 100% and hide... just a simple bar looking like: https://yearinmusic.spotify.com/ but i do not want to use tweenlite just for my progress bar. Does it exist a possibility to get it only with jquery? but not the jquery ui progress bar i actually want to make my own progress bar loading less plugins as possible.

回答1:

To hide an object when the side is fully loaded you can use the following jquery code:

$(document).ready(function(){
    setTimeout(function () {
    $('#yourProgressBar').fadeOut("medium");
    }, 500);
}

The value passed to fadeOut() as string or integer determines the transition duration of the fade animation.

The setTimeout() functions adds a nice delay effect, so that the progressbar only fades out after the specified duration (here 500ms).

To make the progressbar itself you have to either do one on your own or use one of numerous plugins. You already mentioned the jQueryUI progress bar. In my humble opinion the bootstrap progressbar is also quite nice. The nice thing about bootstrap and jqueryUI features is that you can choose which part of the framework/plugins you want to include, so you dont have to include the whole package.

However if you want something ultra-light, here is an outline of how to make a progresbar yourself:

Create an object progressbar with a set relative or absolute width.
Now either manipulate the background of the progressbar or add another element into your progressbar and manipulate its length.
- How to do this? Think what about our page needs the longest time to load. Most probably images. You can add a class to all img-tags in our html page by the simple means of $("img").addClass("prBar");. Now each time one of these loads you make progress in your bar. By how much? Well the progress should be that bar's width divided by the number of elements with the class "prBar". This is calculated as follows: var dWidth = $('#yourProgressBar').offsetWidth / $('.prBar').length;

Another hint: You can increment the width of your progressbar when each element is loaded by calling something like $(".prBar").load(function(){...});

I hope this helps you building the desired code. If you have any questions or suggestions please feel free to ask :)

回答2:

they are some javascript frameworks that allows make web page progress bar, for me and I recommend pace.js and NProgress.js because they are very simple and easy to implement

来源：https://stackoverflow.com/questions/34559894/how-get-a-progress-bar-load-body-content-and-hide-at-100

标签

javascript

jquery

css

load

progress-bar