+ Start a Discussion
Shikha Devi 16Shikha Devi 16 

slds progress indicator css is not working properly.

HI,
I am working on lightning component where I need progress indicator. I am using slds progress indicator but it is not showing css same as shown in the slds guide.
I have used the same code mentioned in the guide.https://www.lightningdesignsystem.com/components/progress-indicator/#flavor-base-default
But still it is not showing connecting line of two button. please find screenshot of issue.User-added image
According to guide image bar should look likeUser-added image

Please help me on the same

Thanks
Shikha
Best Answer chosen by Shikha Devi 16
Shikha Devi 16Shikha Devi 16
@Andrew :Yes,the issue is coming because of Summer17 release. Now this issue is resolved for me. 

Please try given below code

<aura:component >
    <div class="slds-progress">
  <ol class="slds-progress__list">
    <li class="slds-progress__item slds-is-active">
      <button class="slds-button slds-progress__marker" aria-describedby="step-1-tooltip">
        <span class="slds-assistive-text">Step 1 - Active</span>
      </button>
    </li>
    <li class="slds-progress__item">
      <button class="slds-button slds-progress__marker" aria-describedby="step-2-tooltip">
        <span class="slds-assistive-text">Step 2 </span>
      </button>
    </li>
    <li class="slds-progress__item">
      <button class="slds-button slds-progress__marker" aria-describedby="step-3-tooltip">
        <span class="slds-assistive-text">Step 3 </span>
      </button>
    </li>
    <li class="slds-progress__item">
      <button class="slds-button slds-progress__marker" aria-describedby="step-4-tooltip">
        <span class="slds-assistive-text">Step 4 </span>
      </button>
    </li>
    <li class="slds-progress__item">
      <button class="slds-button slds-progress__marker" aria-describedby="step-5-tooltip">
        <span class="slds-assistive-text">Step 5 </span>
      </button>
    </li>
  </ol>
  <div class="slds-progress-bar slds-progress-bar_x-small">
    <span class="slds-progress-bar__value" style="width:0%;">
      <span class="slds-assistive-text">Progress: 0%</span>
    </span>
  </div>
</div>
</aura:component>

 

All Answers

{!Piyush_soni__c}{!Piyush_soni__c}
hi shikha 
below code is working fine in my org. 
<aura:component >
	<div class="slds-progress">
  <ol class="slds-progress__list">
    <li class="slds-progress__item slds-is-active">
      <button class="slds-button slds-progress__marker" aria-describedby="step-1-tooltip">
        <span class="slds-assistive-text">Step 1 - Active</span>
      </button>
    </li>
    <li class="slds-progress__item">
      <button class="slds-button slds-progress__marker" aria-describedby="step-2-tooltip">
        <span class="slds-assistive-text">Step 2 </span>
      </button>
    </li>
    <li class="slds-progress__item">
      <button class="slds-button slds-progress__marker" aria-describedby="step-3-tooltip">
        <span class="slds-assistive-text">Step 3 </span>
      </button>
    </li>
    <li class="slds-progress__item">
      <button class="slds-button slds-progress__marker" aria-describedby="step-4-tooltip">
        <span class="slds-assistive-text">Step 4 </span>
      </button>
    </li>
    <li class="slds-progress__item">
      <button class="slds-button slds-progress__marker" aria-describedby="step-5-tooltip">
        <span class="slds-assistive-text">Step 5 </span>
      </button>
    </li>
  </ol>
  <div class="slds-progress-bar">
    <span class="slds-progress-bar__value" style="width:0%;">
      <span class="slds-assistive-text">Progress: 0%</span>
    </span>
  </div>
</div>
</aura:component>
test app 
<aura:application extends="force:slds">
    <c:progressBar/>
</aura:application>

User-added image
Shikha Devi 16Shikha Devi 16
Hi Piyush,

even I am using same code still progress bar is coming without connecting line.User-added image
{!Piyush_soni__c}{!Piyush_soni__c}
in which browser you have check it? 
Shikha Devi 16Shikha Devi 16
chrome
{!Piyush_soni__c}{!Piyush_soni__c}
ohh, why it's doing strange behavior with your code,
can you share your exact code once and from where do you run your lightning component ?
thanks 
Shikha Devi 16Shikha Devi 16
Component : Test
<aura:component >
    <div class="slds-progress">
  <ol class="slds-progress__list">
    <li class="slds-progress__item slds-is-active">
      <button class="slds-button slds-progress__marker" aria-describedby="step-1-tooltip">
        <span class="slds-assistive-text">Step 1 - Active</span>
      </button>
    </li>
    <li class="slds-progress__item">
      <button class="slds-button slds-progress__marker" aria-describedby="step-2-tooltip">
        <span class="slds-assistive-text">Step 2 </span>
      </button>
    </li>
    <li class="slds-progress__item">
      <button class="slds-button slds-progress__marker" aria-describedby="step-3-tooltip">
        <span class="slds-assistive-text">Step 3 </span>
      </button>
    </li>
    <li class="slds-progress__item">
      <button class="slds-button slds-progress__marker" aria-describedby="step-4-tooltip">
        <span class="slds-assistive-text">Step 4 </span>
      </button>
    </li>
    <li class="slds-progress__item">
      <button class="slds-button slds-progress__marker" aria-describedby="step-5-tooltip">
        <span class="slds-assistive-text">Step 5 </span>
      </button>
    </li>
  </ol>
  <div class="slds-progress-bar">
    <span class="slds-progress-bar__value" style="width:0%;">
      <span class="slds-assistive-text">Progress: 0%</span>
    </span>
  </div>
</div>
</aura:component>

App :
<aura:application extends="force:slds">
    <div>Test</div><br/>
    <div>
    <c:test />
        </div>
</aura:application>
{!Piyush_soni__c}{!Piyush_soni__c}
then it's strange,  
Andrew Da SilvaAndrew Da Silva
I can report I'm having the same issue, According to another developer I know, this issue occured as part of the new Summer 17 release. Works for some of my other colleagues but does not for me.
Shikha Devi 16Shikha Devi 16
@Andrew :Yes,the issue is coming because of Summer17 release. Now this issue is resolved for me. 

Please try given below code

<aura:component >
    <div class="slds-progress">
  <ol class="slds-progress__list">
    <li class="slds-progress__item slds-is-active">
      <button class="slds-button slds-progress__marker" aria-describedby="step-1-tooltip">
        <span class="slds-assistive-text">Step 1 - Active</span>
      </button>
    </li>
    <li class="slds-progress__item">
      <button class="slds-button slds-progress__marker" aria-describedby="step-2-tooltip">
        <span class="slds-assistive-text">Step 2 </span>
      </button>
    </li>
    <li class="slds-progress__item">
      <button class="slds-button slds-progress__marker" aria-describedby="step-3-tooltip">
        <span class="slds-assistive-text">Step 3 </span>
      </button>
    </li>
    <li class="slds-progress__item">
      <button class="slds-button slds-progress__marker" aria-describedby="step-4-tooltip">
        <span class="slds-assistive-text">Step 4 </span>
      </button>
    </li>
    <li class="slds-progress__item">
      <button class="slds-button slds-progress__marker" aria-describedby="step-5-tooltip">
        <span class="slds-assistive-text">Step 5 </span>
      </button>
    </li>
  </ol>
  <div class="slds-progress-bar slds-progress-bar_x-small">
    <span class="slds-progress-bar__value" style="width:0%;">
      <span class="slds-assistive-text">Progress: 0%</span>
    </span>
  </div>
</div>
</aura:component>

 
This was selected as the best answer