The Progressbar component displays feedback to the user about the progress of a long-running task.
new ac.loaders.ProgressBar(
{
type: "Linear",
theme: "Bootstrap5",
height: "11",
value: 100,
animation: {
enable: true,
duration: 2500
}
},
"#cntlLinearDeterminate"
);
new ac.loaders.ProgressBar(
{
type: "Linear",
theme: "Bootstrap5",
height: "11",
isIndeterminate: true,
value: 20,
animation: {
enable: true,
duration: 2500
}
},
"#cntlLinearIndeterminate"
);
new ac.loaders.ProgressBar(
{
type: "Linear",
theme: "Bootstrap5",
height: "11",
isActive: true,
value: 100,
animation: {
enable: true,
duration: 2500
}
},
"#cntlLinearActive"
);
new ac.loaders.ProgressBar(
{
type: "Linear",
theme: "Bootstrap5",
height: "11",
secondaryProgress: 32,
value: 11,
animation: {
enable: true,
duration: 2500
}
},
"#cntlLinearBuffer"
);
new ac.loaders.ProgressBar(
{
type: "Linear",
theme: "Bootstrap5",
height: "11",
segmentCount: 7,
value: 100,
animation: {
enable: true,
duration: 2500
}
},
"#cntlLinearSegment"
);
const btnLinearRefresh = new ac.buttons.Button({ isPrimary: true }, "#btnLinearRefresh");
btnLinearRefresh.element.onclick = () => {
cntlLinearDeterminate.refresh();
cntlLinearIndeterminate.refresh();
cntlLinearActive.refresh();
cntlLinearBuffer.refresh();
cntlLinearSegment.refresh();
};<div class="form-horizontal form-bordered">
<div class="form-group row">
<label class="form-label col-form-label col-lg-4">Determinate</label>
<div class="col-lg-8">
<div id="cntlLinearDeterminate"></div>
</div>
</div>
<div class="form-group row">
<label class="form-label col-form-label col-lg-4">Indeterminate</label>
<div class="col-lg-8">
<div id="cntlLinearIndeterminate"></div>
</div>
</div>
<div class="form-group row">
<label class="form-label col-form-label col-lg-4">Active</label>
<div class="col-lg-8">
<div id="cntlLinearActive"></div>
</div>
</div>
<div class="form-group row">
<label class="form-label col-form-label col-lg-4">Buffer</label>
<div class="col-lg-8">
<div id="cntlLinearBuffer"></div>
</div>
</div>
<div class="form-group row">
<label class="form-label col-form-label col-lg-4">Segment</label>
<div class="col-lg-8">
<div id="cntlLinearSegment"></div>
</div>
</div>
<div class="form-group row">
<label class="form-label col-form-label col-lg-4"></label>
<div class="col-lg-8" style="text-align: center">
<button id="btnLinearRefresh">Refresh</button>
</div>
</div>
</div>const cntlLinearTooltip = new ac.loaders.ProgressBar(
{
type: "Linear",
theme: "Bootstrap5",
height: "11",
value: 62,
tooltip: { enable: true },
animation: {
enable: true,
duration: 2500
}
},
"#cntlLinearTooltip"
);
const btnLinearTooltipRefresh = new ac.buttons.Button({ isPrimary: true }, "#btnLinearTooltipRefresh");
btnLinearTooltipRefresh.element.onclick = () => {
cntlLinearTooltip.refresh();
};<div class="form-horizontal form-bordered">
<div class="form-group row">
<label class="form-label col-form-label col-lg-4">Tooltip</label>
<div class="col-lg-8">
<div id="cntlLinearTooltip"></div>
</div>
</div>
<div class="form-group row">
<label class="form-label col-form-label col-lg-4"></label>
<div class="col-lg-8" style="text-align: center">
<button id="btnLinearTooltipRefresh">Refresh</button>
</div>
</div>
</div>const cntlCircularDeterminate = new ac.loaders.ProgressBar(
{
type: "Circular",
theme: "Bootstrap5",
startAngle: 180,
endAngle: 180,
width: "150px",
height: "150px",
value: 100,
animation: {
enable: true,
duration: 2500
}
},
"#cntlCircularDeterminate"
);
const cntlCircularIndeterminate = new ac.loaders.ProgressBar(
{
type: "Circular",
theme: "Bootstrap5",
isIndeterminate: true,
width: "150px",
height: "150px",
startAngle: 180,
endAngle: 180,
value: 20,
animation: {
enable: true,
duration: 2500
}
},
"#cntlCircularIndeterminate"
);
const cntlCircularActive = new ac.loaders.ProgressBar(
{
type: "Circular",
theme: "Bootstrap5",
width: "150px",
height: "150px",
isActive: true,
value: 100,
animation: {
enable: true,
duration: 2500
}
},
"#cntlCircularActive"
);
const cntlCircularBuffer = new ac.loaders.ProgressBar(
{
type: "Circular",
theme: "Bootstrap5",
width: "150px",
height: "150px",
secondaryProgress: 62,
value: 32,
animation: {
enable: true,
duration: 2500
}
},
"#cntlCircularBuffer"
);
const cntlCircularSegment = new ac.loaders.ProgressBar(
{
type: "Circular",
theme: "Bootstrap5",
width: "150px",
height: "150px",
segmentCount: 7,
value: 100,
animation: {
enable: true,
duration: 2500
}
},
"#cntlCircularSegment"
);
const btnCircularRefresh = new ac.buttons.Button({ isPrimary: true }, "#btnCircularRefresh");
btnCircularRefresh.element.onclick = () => {
cntlCircularDeterminate.refresh();
cntlCircularIndeterminate.refresh();
cntlCircularActive.refresh();
cntlCircularBuffer.refresh();
cntlCircularSegment.refresh();
};<div class="form-horizontal form-bordered">
<div class="form-group row">
<label class="form-label col-form-label col-lg-4">Determinate</label>
<div class="col-lg-8" style="text-align: center">
<div id="cntlCircularDeterminate"></div>
</div>
</div>
<div class="form-group row">
<label class="form-label col-form-label col-lg-4">Indeterminate</label>
<div class="col-lg-8" style="text-align: center">
<div id="cntlCircularIndeterminate"></div>
</div>
</div>
<div class="form-group row">
<label class="form-label col-form-label col-lg-4">Active</label>
<div class="col-lg-8" style="text-align: center">
<div id="cntlCircularActive"></div>
</div>
</div>
<div class="form-group row">
<label class="form-label col-form-label col-lg-4">Buffer</label>
<div class="col-lg-8" style="text-align: center">
<div id="cntlCircularBuffer"></div>
</div>
</div>
<div class="form-group row">
<label class="form-label col-form-label col-lg-4">Segment</label>
<div class="col-lg-8" style="text-align: center">
<div id="cntlCircularSegment"></div>
</div>
</div>
<div class="form-group row">
<label class="form-label col-form-label col-lg-4"></label>
<div class="col-lg-8" style="text-align: center">
<button id="btnCircularRefresh">Refresh</button>
</div>
</div>
</div>