Loader

Page loading progress bar, simulated by JavaScript functions

  1. Home
  2. Extra
  3. Loading Progress

Example Usage

– + ×
Example, Live Preview Usage Directions
Load to 100% Will show progress bar in the header that will load to 100% and will automatically be hidden. Delay for this animation is 1.3 seconds.

Sample code: 
show_loading_bar(100);
Load to 65% Will fill the progress bar to 65% and will stop.

Sample code: 
show_loading_bar(65);
Load to 20% Regression sample, will work if you have already loaded progress to 65% in this case.

Sample code: 
show_loading_bar(20);
Callback Test (Finish) An example how you can trigger specific function after the progress bar reaches the end of given percentage.

Sample code: 
show_loading_bar({
pct: 78,
finish: function(pct)
{
alert("Progress stopped to: " + pct + '%');
hide_loading_bar();
}
});
Callback Test (Before) An example how you can trigger specific function before the progress bar starts loading. You can also apply both callbacks on finish and before.

Sample code: 
show_loading_bar({
pct: 78,
delay: 5,
before: function(pct)
{
alert("Progress bar initialized");
}
});
More Advanced Example Partial loading of the progress bar, this will create several animation instances and can be used in case if you request more than one HTTP request. See the example below.

Sample code: 
show_loading_bar({
pct: 78,
delay: 1.2,
finish: function(pct)
{
show_loading_bar({
pct: 30,
delay: 1.7,
wait: .5,
finish: function()
{
show_loading_bar({
wait: .5,
pct: 100
})
}
});
}
});

API Functions

– + ×
Function Name Description and Usage Details

show_loading_bar(options|percentage)

 This function will show the progress bar in the upper part of window, and can be called in two ways:

1. Percentage - Simply fills the progress bar but do not do any action: 
show_loading_bar(100);


2. Options - Its more flexible than the percentage, because here you can adjust delay, wait time, percentage and assign events (before and finish).

Example: 
show_loading_bar({
pct: 100, // number from 0-100,
delay: 1.3, // seconds to fully load the percentage (seconds unit)
wait: 0, // before starting loading will wait for specified seconds (seconds unit)
before: function(pct){ ... }, // Before starting to fill the progress, this function will be called,
finish: function(pct){ ... }, // After the progress bar finishes loading the specified percentage,
resetOnEnd: true // Will set the percentage to 0 and will be hidden after the progress bar hits 100%
});

hide_loading_bar()

 Simply hides the progress bar even if it is currently in progress.