star Bemat Admin Exclusive Premium Plugin

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:

<div class="linear-progress-demo linear-progress-demo-determinate" data-toggle="linear-progress" data-mode="determinate" data-type="primary" data-value="30"></div>

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:

<div class="linear-progress-demo linear-progress-demo-determinate2" data-toggle="linear-progress" data-mode="determinate" data-type="danger" data-value="43"></div>

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:

<div class="linear-progress-demo linear-progress-demo-indeterminate" data-toggle="linear-progress" data-mode="indeterminate" data-type="info"></div>

Buffer

For operations where the user wants to indicate some activity or loading from the server, use the buffer indicator:

Examples:

HTML Code:

<div class="linear-progress-demo linear-progress-demo-buffer" data-toggle="linear-progress" data-mode="buffer" data-value="35" data-buffer="91" data-type="success"></div>

Query

For situations where the user wants to indicate pre-loading (until the loading can actually be made), use the query indicator:

Examples:

HTML Code:

<div class="linear-progress-demo linear-progress-demo-query" data-toggle="linear-progress" data-mode="query" data-type="warning"></div>