[SalesForce] How to update the css of the slds progress bar

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>

Best Answer

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>
Related Topic