Wednesday, March 25, 2020

Progress ring/circular in lightning web components(lwc)

HTML Code
<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

5 comments:

  1. it is very small, can be more larger?

    ReplyDelete
    Replies
    1. Hi Tony,
      I used large size, if you want more lager circular use SLDS classes instead of Progress-ring.

      Delete
    2. can you specify a bit more on the solution on how to use the slds classes?

      Delete
  2. Hi Shaik,
    Thank 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

    ReplyDelete
  3. Hi Shaik,
    How were you able to change the progress ring color from default(dark green) to forest green. Can you share the css as well please?

    ReplyDelete