FREE SALESFORCE LWC COMPONENT

Progress Bar

Expose progress with aria-valuenow and keep the percentage meaningful rather than decorative.

Component structure

COMPONENTwcsProgress

PLATFORMSalesforce Lightning Web Components

STARTERTemplate + JavaScript + CSS + Meta XML

HTML template

<template>
  <div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow={value}>
    <span style={barStyle}></span>
  </div>
</template>

JavaScript

import { LightningElement, api } from 'lwc';

export default class WcsProgress extends LightningElement {
  @api value = 60;

  get barStyle() {
    return `width:${this.value}%`;
  }
}

CSS

.progress{height:.5rem;background:#e5e5e5;border-radius:999px;overflow:hidden}.progress span{display:block;height:100%;background:#0b5cab;transition:width .2s ease}

Meta XML

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