---
schema_version: "1"
id: 7aa44b67ed71a34c4992cb38d83ae13824f57ebcaaf3cc5d6e0ff732f4b51ee5
title: ProgressBar Lightning Web Component (Managed Package)
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_progressbar_lightning_web_component.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_progressbar_lightning_web_component.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: eacd8ff1affc7b2c04973ef69f9dbecf6b3f138384b70dce2b6f6d5ae286f1be
description: For the managed package runtime, this page contains the ProgressBar LWC ReadMe for each Vlocity release.
products:
  - Omnistudio
release: "264"
---
# ProgressBar Lightning Web Component (Managed Package)

For the managed package runtime, this page contains the ProgressBar LWC ReadMe for each Vlocity release.

![Managed Package app icon](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/resources-global/_corporate/images/managedpackageicon.png) This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see [Omnistudio Help](https://help.salesforce.com/s/articleView?id=xcloud.os_omnistudio_standard.htm&language=en_US).

## Vlocity Insurance and Health Spring '20

The _ProgressBar Lightning Web Component_ displays the progress of activity on a page. The _ProgressBar LWC_ supports custom labels.

## Available c-progress-bar Attributes

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col>
          <col>
          <col>
          <col>
          <col>
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d90894e68">
              <p style="margin-bottom:0;">Attribute</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d90894e74">
              <p style="margin-bottom:0;">Value</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d90894e80">
              <p style="margin-bottom:0;">Type</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d90894e86">
              <p style="margin-bottom:0;">Required</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d90894e92">
              <p style="margin-bottom:0;">Description</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d90894e68 ">
              <p style="margin-bottom:0;">progress</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d90894e74 ">
              <p style="margin-bottom:0;">0-100 (Default: 0)</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d90894e80 ">
              <p style="margin-bottom:0;">number</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d90894e86 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d90894e92 ">
              <p style="margin-bottom:0;">Value representing the progress bar's completeness.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d90894e68 ">
              <p style="margin-bottom:0;">size</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d90894e74 ">
              <p style="margin-bottom:0;">xx-small, x-small, small, medium, large (Default: small)</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d90894e80 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d90894e86 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d90894e92 ">
              <p style="margin-bottom:0;">Corresponds to slds/nds styles determining size. {theme}-progress-bar_xx-small, x-small, small, medium, large.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d90894e68 ">
              <p style="margin-bottom:0;">transition</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d90894e74 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d90894e80 ">
              <p style="margin-bottom:0;">number</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d90894e86 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d90894e92 ">
              <p style="margin-bottom:0;">Number in seconds. Represents the css property transition-duration.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d90894e68 ">
              <p style="margin-bottom:0;">theme</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d90894e74 ">
              <p style="margin-bottom:0;">slds, nds (Default: slds)</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d90894e80 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d90894e86 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d90894e92 ">
              <p style="margin-bottom:0;">Specifies the theme to use.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d90894e68 ">
              <p style="margin-bottom:0;">success</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d90894e74 ">
              <p style="margin-bottom:0;">true, false (Default: false)</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d90894e80 ">
              <p style="margin-bottom:0;">boolean</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d90894e86 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d90894e92 ">
              <p style="margin-bottom:0;">Flag when true will render the component with success styling.</p>
            </td>

          </tr>
        </tbody>
      </table>

## Example c-progress-bar Component

```
<c-progress-bar progress="0"
    size="x-small"
    theme="nds"
    transition="0.5"
    success
></c-progress-bar>
```

## Available Custom Labels

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col>
          <col>
          <col>
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d90894e272">
              <p style="margin-bottom:0;">Label</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d90894e278">
              <p style="margin-bottom:0;">ApiName</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d90894e284">
              <p style="margin-bottom:0;">Description</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Label" class="slds-cell-wrap" style="vertical-align:top;" headers="d90894e272 ">
              <p style="margin-bottom:0;">Progress</p>
            </td>

            <td data-label="ApiName" class="slds-cell-wrap" style="vertical-align:top;" headers="d90894e278 ">
              <p style="margin-bottom:0;">cmpProgress</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d90894e284 ">
              <p style="margin-bottom:0;">Assistive text for the icon that displays where a user is in the process.</p>
            </td>

          </tr>
        </tbody>
      </table>

## Available Methods

setProgress(value) Sets the % of completeness of the progress bar value without setting the api value directly.

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col>
          <col>
          <col>
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d90894e338">
              <p style="margin-bottom:0;">Param</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d90894e344">
              <p style="margin-bottom:0;">Type</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d90894e350">
              <p style="margin-bottom:0;">Description</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Param" class="slds-cell-wrap" style="vertical-align:top;" headers="d90894e338 ">
              <p style="margin-bottom:0;">value</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d90894e344 ">
              <p style="margin-bottom:0;">number</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d90894e350 ">
              <p style="margin-bottom:0;">Value representing the progress bar's completeness. Valid values from 0-100.</p>
            </td>

          </tr>
        </tbody>
      </table>

progressBar.setSuccess() Sets the value of ProgressBar.success without setting the api value directly.

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col>
          <col>
          <col>
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d90894e398">
              <p style="margin-bottom:0;">Name</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d90894e404">
              <p style="margin-bottom:0;">Type</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d90894e410">
              <p style="margin-bottom:0;">Description</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Name" class="slds-cell-wrap" style="vertical-align:top;" headers="d90894e398 ">
              <p style="margin-bottom:0;">success</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d90894e404 ">
              <p style="margin-bottom:0;">boolean</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d90894e410 ">
              <p style="margin-bottom:0;">If success is true, the progress indicator will change to the success color.</p>
            </td>

          </tr>
        </tbody>
      </table>

ProgressBar.ProgressBar Custom element that will render a slds-progress-bar or nds-progress bar css component. Extends the LightningElement.

## Vlocity Insurance and Health Winter '20 and Vlocity CME Spring '20

The _ProgressBar Lightning Web Component_ displays the progress of activity on a page.

## Available c-progress-bar Attributes

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col>
          <col>
          <col>
          <col>
          <col>
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d90894e480">
              <p style="margin-bottom:0;">Attribute</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d90894e486">
              <p style="margin-bottom:0;">Value</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d90894e492">
              <p style="margin-bottom:0;">Type</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d90894e498">
              <p style="margin-bottom:0;">Required</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d90894e504">
              <p style="margin-bottom:0;">Description</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d90894e480 ">
              <p style="margin-bottom:0;">progress</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d90894e486 ">
              <p style="margin-bottom:0;">0-100 (Default: 0)</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d90894e492 ">
              <p style="margin-bottom:0;">number</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d90894e498 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d90894e504 ">
              <p style="margin-bottom:0;">Value representing the progress bar's completeness.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d90894e480 ">
              <p style="margin-bottom:0;">size</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d90894e486 ">
              <p style="margin-bottom:0;">xx-small, x-small, small, medium, large (Default: small)</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d90894e492 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d90894e498 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d90894e504 ">
              <p style="margin-bottom:0;">Corresponds to slds/nds styles determining size. {theme}-progress-bar_xx-small, x-small, small, medium, large.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d90894e480 ">
              <p style="margin-bottom:0;">transition</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d90894e486 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d90894e492 ">
              <p style="margin-bottom:0;">number</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d90894e498 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d90894e504 ">
              <p style="margin-bottom:0;">Number in seconds. Represents the css property transition-duration.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d90894e480 ">
              <p style="margin-bottom:0;">theme</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d90894e486 ">
              <p style="margin-bottom:0;">slds, nds (Default: slds)</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d90894e492 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d90894e498 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d90894e504 ">
              <p style="margin-bottom:0;">Specifies the theme to use.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d90894e480 ">
              <p style="margin-bottom:0;">success</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d90894e486 ">
              <p style="margin-bottom:0;">true, false (Default: false)</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d90894e492 ">
              <p style="margin-bottom:0;">boolean</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d90894e498 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d90894e504 ">
              <p style="margin-bottom:0;">Flag when true will render the component with success styling.</p>
            </td>

          </tr>
        </tbody>
      </table>

## Example c-progress-bar Component

```
<c-progress-bar progress="0"
           size="x-small"
           theme="nds"
           transition="0.5"
           success>
</c-progress-bar>
```

## Available Methods

setProgress(value)

Sets the % of completeness of the progress bar value without setting the API value directly.

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col>
          <col>
          <col>
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d90894e690">
              <p style="margin-bottom:0;">Param</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d90894e696">
              <p style="margin-bottom:0;">Type</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d90894e702">
              <p style="margin-bottom:0;">Description</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Param" class="slds-cell-wrap" style="vertical-align:top;" headers="d90894e690 ">
              <p style="margin-bottom:0;">value</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d90894e696 ">
              <p style="margin-bottom:0;">number</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d90894e702 ">
              <p style="margin-bottom:0;">Value representing the progress bar's completeness. Valid values from 0-100.</p>
            </td>

          </tr>
        </tbody>
      </table>

progressBar.setSuccess()

Sets the value of ProgressBar.success without setting the API value directly.

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col>
          <col>
          <col>
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d90894e754">
              <p style="margin-bottom:0;">Name</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d90894e760">
              <p style="margin-bottom:0;">Type</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d90894e766">
              <p style="margin-bottom:0;">Description</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Name" class="slds-cell-wrap" style="vertical-align:top;" headers="d90894e754 ">
              <p style="margin-bottom:0;">success</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d90894e760 ">
              <p style="margin-bottom:0;">boolean</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d90894e766 ">
              <p style="margin-bottom:0;">If success is true, the progress indicator will change to the success color.</p>
            </td>

          </tr>
        </tbody>
      </table>

ProgressBar.ProgressBar Custom element that will render a slds-progress-bar or nds-progress bar CSS component. Extends the LightningElement.