Toggle Side Panel
Close search

Activity › Forums › Salesforce® Discussions › how to use progress bar on lightning component?

  • Avnish Yadav

    Member
    August 21, 2018 at 6:12 AM

    Hi Prachi,

    A progress bar component communicates to the user the progress of a particular process.

    Using Lightning component tag:-

    <lightning:progressBar value="50" size="large" />

    Using SLDS tag:-

    <div class="slds-progress-bar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="25" role="progressbar">
    <span class="slds-progress-bar__value" style="width: 25%;">
    <span class="slds-assistive-text">Progress: 25%</span>
    </span>
    </div>

    Thanks.

  • madhulika shah

    Member
    August 21, 2018 at 6:34 AM

    Hi Prachi,

    A progress bar component communicates to the user the progress of a particular process.

    Here are some developer guidelines:
    <div class="slds-progress-bar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="25" role="progressbar">
    <span class="slds-progress-bar__value" style="width: 25%;">
    <span class="slds-assistive-text">Progress: 25%</span>
    </span>
    </div>

    To know more about its classes and categories, please refer to the link provided:

    https://www.lightningdesignsystem.com/components/progress-bar/

Log In to reply.

Popular Salesforce Blogs

Popular Salesforce Videos