1. Admin
  2. Dashboard
  3. Components
  4. Progress Indicators
  5. Circular Progress

Circular 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 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");
});