Minimize visual changes that occur while your app loads content by representing each operation with a single activity indicator.
Initializing
To work with linear preloaders, you must initialize the jquery.linearProgress.js
by calling the init method, or using the data-toggle="linear-progress"
attribute.
$(".circular-preloader-demo").linearProgress();
Determinate
For operations where the percentage of the operation completed can be determined, use a determinate indicator. They give users a quick sense of how long an operation will take.
Examples:
HTML Code:
How to set the progress?
To set the progress of the linear preloader, you must call the setProgress
method, by passing a number value from 0 to 100.
$(".linear-progress-demo-determinate2").linearProgress("setProgress",[0-100]);
Examples:
HTML Code:
JAVASCIPT Code:
$(".btn-linear-progress-demo-1").on("click",function(){ $(".linear-progress-demo-determinate2").linearProgress("setProgress",15); }); $(".btn-linear-progress-demo-2").on("click",function(){ $(".linear-progress-demo-determinate2").linearProgress("setProgress",67); }); $(".btn-linear-progress-demo-3").on("click",function(){ $(".linear-progress-demo-determinate2").linearProgress("setProgress",100); });
Indeterminate
For operations where the user is asked to wait a moment while something finishes up, and it's not necessary to expose what's happening behind the scenes and how long it will take, use an indeterminate indicator.
Examples:
HTML Code:
Buffer
For operations where the user wants to indicate some activity or loading from the server, use the buffer indicator:
Examples:
HTML Code:
Query
For situations where the user wants to indicate pre-loading (until the loading can actually be made), use the query indicator: