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 circular progress, you must initialize the jquery.CircularProgress.js by calling the init method, or using the data-toggle="circular-progress" attribute.

$(".circular-preloader-demo").circularProgress();

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="circular-preloader-demo circular-preloader-demo-determinate" data-mode="determinate" data-toggle="circular-progress" data-type="primary" data-value="30"></div>

How to set the progress?

To set the progress of the circular progress, you must call the set method, by passing a number value from 0 to 100.

$(".circular-preloader-demo-determinate").circularProgress("set",[0-100]);

Examples:

HTML Code:

<div class="circular-preloader-demo circular-preloader-demo-determinate2" data-toggle="circular-progress" data-mode="determinate" data-type="danger" data-value="82"></div>

JAVASCIPT Code:

$(".btn-circular-progress-demo-1").on("click",function(){
	$(".circular-preloader-demo-determinate2").circularProgress("set",25);
});
$(".btn-circular-progress-demo-2").on("click",function(){
	$(".circular-preloader-demo-determinate2").circularProgress("set",73);
});
$(".btn-circular-progress-demo-3").on("click",function(){
	$(".circular-preloader-demo-determinate2").circularProgress("set",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="circular-preloader-demo circular-preloader-demo-indeterminate" data-toggle="circular-progress" data-mode="indeterminate" data-type="info" ></div>

Controlling the indeterminate circular progress

To control the indeterminate circular progress, you can call some of the four methods below: pause, play, hide or show

$(".circular-preloader-demo-determinate").circularProgress([pause|play|hide|show]);

Examples:

This circular progress is paused by default.

HTML Code:

This circular progress is paused by the data-state attribute.

<div class="circular-preloader-demo circular-preloader-demo-indeterminate2" data-toggle="circular-progress" data-mode="indeterminate" data-type="success" data-state="pause"></div>

JAVASCRIPT Code:

$(".btn-circular-progress-demo-4").on("click",function(){
	$(".circular-preloader-demo-indeterminate2").circularProgress("pause");
});
$(".btn-circular-progress-demo-5").on("click",function(){
	$(".circular-preloader-demo-indeterminate2").circularProgress("play");
});
$(".btn-circular-progress-demo-6").on("click",function(){
	$(".circular-preloader-demo-indeterminate2").circularProgress("hide");
});
$(".btn-circular-progress-demo-7").on("click",function(){
	$(".circular-preloader-demo-indeterminate2").circularProgress("show");
});