Monday, September 16, 2019

Progress Bar in Lightning Web Component(lwc)

This post explains how to use progress bar in Lightning Web Components(lwc)



progressBarDemoInLWC.html
<template>
    <lightning-card title="Progress Bar in Lightning Web Component"><br/>
        <div style="margin-left: 2%;">
            <lightning-progress-bar size="medium" value={progress} variant="circular"></lightning-progress-bar>
        </div>
        <div class="slds-text-align--center slds-text-title" style="color:forestgreen;">
            {processStatus}
        </div>
    </lightning-card>
</template>

ProgressBarDemoInLWC.js
import { LightningElement, track } from 'lwc';

export default class ProgressBarDemoInLWC extends LightningElement {
    @track progress = 0;
    @track 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);

    }
}

ProgressBarDemoInLWC.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="ProgressBarDemoInLWC">
    <apiVersion>46.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Output

2 comments:

  1. @track progress = 0;
    @track processStatus = 'In Progress';
    connectedCallback() {
    this._interval = setInterval(() => {
    this.progress = parseInt(this.SelectedAnswer);
    this.processStatus = 'Processing => ' + this.progress +'/20';
    console.log('progress',this.progress);
    console.log('processStatus',this.processStatus);
    if(this.progress >= 15 && this.progress <= 20) {
    clearInterval(this._interval);
    this.processStatus = 'Healthy Wellbeing';
    }

    else if(this.progress >= 8 && this.progress<=15) {
    clearInterval(this._interval);
    this.processStatus = 'Moderate Wellbeing';
    }

    else if(this.progress >= 1 && this.progress <= 7) {
    clearInterval(this._interval);
    this.processStatus = ' Needs Attention';
    }
    }, 300);

    }

    ReplyDelete
  2. @track progress = 0;
    @track processStatus = 'In Progress';
    connectedCallback() {
    this._interval = setInterval(() => {
    this.progress = parseInt(this.SelectedAnswer);
    this.processStatus = 'Processing => ' + this.progress +'/20';
    console.log('progress',this.progress);
    console.log('processStatus',this.processStatus);
    if(this.progress >= 15 && this.progress <= 20) {
    clearInterval(this._interval);
    this.processStatus = 'Healthy Wellbeing';
    }

    else if(this.progress >= 8 && this.progress<=15) {
    clearInterval(this._interval);
    this.processStatus = 'Moderate Wellbeing';
    }

    else if(this.progress >= 1 && this.progress <= 7) {
    clearInterval(this._interval);
    this.processStatus = ' Needs Attention';
    }
    }, 300);

    }

    ReplyDelete