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