1. Admin
  2. Dashboard
  3. Components
  4. Preloaders
  5. Linear Progress

Linear Progress

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>