2

I am using below code given at SLDS site. I want to modify the css to change the connector line width and color for pending and completed steps. I tried in browser but couldn't find any css class to update color and height.

enter image description here

   <div class="slds-progress">
  <ol class="slds-progress__list">
    <li class="slds-progress__item slds-is-completed">
      <button class="slds-button slds-button_icon slds-progress__marker slds-progress__marker_icon" title="Step 1 - Completed">
        <svg class="slds-button__icon" aria-hidden="true">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#success"></use>
        </svg>
        <span class="slds-assistive-text">Step 1 - Completed</span>
      </button>
    </li>
    <li class="slds-progress__item slds-is-completed">
      <button class="slds-button slds-button_icon slds-progress__marker slds-progress__marker_icon" title="Step 2 - Completed">
        <svg class="slds-button__icon" aria-hidden="true">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#success"></use>
        </svg>
        <span class="slds-assistive-text">Step 2 - Completed</span>
      </button>
    </li>
    <li class="slds-progress__item slds-is-active">
      <button class="slds-button slds-progress__marker">
        <span class="slds-assistive-text">Step 3 - Active</span>
      </button>
    </li>
    <li class="slds-progress__item">
      <button class="slds-button slds-progress__marker">
        <span class="slds-assistive-text">Step 4 </span>
      </button>
    </li>
    <li class="slds-progress__item">
      <button class="slds-button slds-progress__marker">
        <span class="slds-assistive-text">Step 5 </span>
      </button>
    </li>
  </ol>
  <div class="slds-progress-bar slds-progress-bar_x-small" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50" role="progressbar">
    <span class="slds-progress-bar__value" style="width:50%">
      <span class="slds-assistive-text">Progress: 50%</span>
    </span>
  </div>
</div>
2

I found the answer after looking at full css. This div has different classes such as x-small, small, medium etc. where we can set the height accordingly.

<div class="slds-progress-bar slds-progress-bar_x-small" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" role="progressbar" ng-if="stepsCnt.length > 1">
<span class="slds-progress-bar__value" ng-style="{'width':calculateProgressWidth(), 'background': '#5eb4ff'}">
<span class="slds-assistive-text">Progress: 0%</span></span>
</div>

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.