SCSS

by Victor

HTML

<div class="stepper">
  <div class="stepper__display">Section 3 of 11</div>
  <div class="stepper__steps">
    <div class="stepper__steps__step stepper__steps__step--done"></div>
    <div class="stepper__steps__step stepper__steps__step--current"></div>
    <div class="stepper__steps__step"></div>
    <div class="stepper__steps__step"></div>
 

 <div class="stepper__steps__step"></div>
    <div class="stepper__steps__step"></div>
    <div class="stepper__steps__step"></div>

</div>
</div>

SCSS

$stepper-base: 10px;
.stepper {

  /* border: 1px solid red; */
  text-align:center;
  padding: 1rem 0;
  
  &__display {
    font-weight: 600;
    font-family: sans-serif;
    font-size: $stepper-base ;
    text-transform: uppercase;
    opacity: 0.5;
    margin-bottom: ($stepper-base * 0.5);
    
  }
  
  &__steps {
    position: relative;
    display: inline-block;
    height: $stepper-base;
    display: inline-flex;
    justify-content: space-between;
    
    /* &:before {
      width: 100%;
      height: 2px;
      position: absolute;
      top: 50%;
      left: 0;
      content: '';
      background: grey;
      transform: translateY(-50%);
    } */
  
    &__step {
      display: inline-block;
      margin: 0 ;
      width: $stepper-base;
      height: $stepper-base;
      content:'';
      background: blue;
      margin-right: 1rem;
      border-radius: 100px;
      background: lightgrey;
      position: relative;
       background: white;
        box-shadow: inset 0 0 0 2px lightgrey;
        
      
      &:before {
      width: ($stepper-base * 2);
      height: ($stepper-base / 5);
      position: absolute;
      top: 50%;
      left: 100%;
      content: '';
      background: lightgrey;
      transform: translateY(-50%);
    }
     &:last-child {
        margin-right: 0;
        &:before {
          display: none;
        }
      }
      
      &--done {
           background: blue;
        box-shadow: inset 0 0 0 2px blue;
        
      
      
        &:before {
          background: blue;
        }
      }
      
      &--current {
        background: white;
        box-shadow: inset 0 0 0 2px blue;
        
        
      }
      
      
    }
  }
}