2

I put this slds progress bar code in my lightning component

<aura:component  controller="myController" >
<div>
    <div class="slds-grid slds-grid_align-spread slds-p-bottom_x-small" id="progress-bar-label-id-1">
     <span>Status</span>
     <span aria-hidden="true">
        <strong>25% Complete</strong>
     </span>
    </div>
    <div class="slds-progress-bar barStyle" aria-valuemin="0" aria-valuemax="100" aria-valuenow="25" aria-labelledby="progress-bar-label-id-1" role="progressbar">
    <span class="slds-progress-bar__value" style="width: 25%;">
          <span class="slds-assistive-text">Progress: 25%</span>
    </span>
    </div>

It's just part of the whole code. I'm already using a controller for this component. I just need to add a progress bar on one of the rows. I have another controller for the progress bar that computes from apex jobs. I just dont know how to apply it on this lightning component. I'm still confused. i've found a sample code on net that I wish to apply...but i dont know how to start it...

this is the sample code that I might want to apply found in this site but it's used on a visualforce page

3

Unless you have a very specific requirement in terms of style, use the lightning:progressBar base lightning component:

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

you can try using the below

<lightning:progressIndicator currentStep="{!v.currentStepIs}" type="base">
         <lightning:progressStep label="1st Step" value="" onclick=""/>
         <lightning:progressStep label="2nd Step" value="" onclick=""/>
         <lightning:progressStep label="3rd Step" value="" onclick=""/>
    </lightning:progressIndicator>
  • 2
    what you are proposing here is a progress indicator and not a progress bar. It's a different component from what OP requested. – POZ Aug 16 '18 at 9:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.