Lightning Web Component Progress Bar – Biswajeet Samal's Blog

LWCProgressBar.html

<template>
    <div class="slds-theme_default">
        <div class="slds-p-around_medium">
            <lightning-progress-bar value={progress}></lightning-progress-bar>
        </div>
    </div>
</template>

LWCProgressBar.js

import { LightningElement, track } from 'lwc';

export default class LWCProgressBar extends LightningElement {
    @track progress = 0;

    connectedCallback() {
        this._interval = setInterval(() => {
            this.progress = this.progress === 100 ? 0 : this.progress + 1;
        }, 200);
    }
}

LWCProgressBar.js-meta.xml

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

Output: