HTML Code
JS Code
Output
<template>
<lightning-card title="Progress ring in Lightning Web Component"><br/>
<div>
<lightning-progress-ring variant="base-autocomplete" value={progress} size="large" class="slds-align_absolute-center"> </lightning-progress-ring>
</div>
<div class="slds-text-align--center slds-text-title" style="color:forestgreen;">
{processStatus}
</div>
</lightning-card>
</template>
JS Code
import { LightningElement, track } from 'lwc';
export default class ProgressBarDemoInLWC extends LightningElement {
progress = 0;
processStatus = 'In Progress';
connectedCallback() {
// eslint-disable-next-line @lwc/lwc/no-async-operation
this._interval = setInterval(() => {
this.progress = this.progress + 5;
this.processStatus = 'Processing => ' + this.progress +'/100';
if(this.progress === 100) {
clearInterval(this._interval);
this.processStatus = 'Completed';
}
}, 300);
}
}
Output
it is very small, can be more larger?
ReplyDeleteHi Tony,
DeleteI used large size, if you want more lager circular use SLDS classes instead of Progress-ring.
can you specify a bit more on the solution on how to use the slds classes?
DeleteHi Shaik,
ReplyDeleteThank for this post,
what's the best way to pull the value within the progress ring ? if it has reached 50% then I would like show the value within the ring.
Thank you