html & CSS 진행률 막대

이런 느낌의 진행률 막대를 만드는 방법

progress.html.haml

%nav.progress
  %ul.progress-bar
    %li.through#through
      会員情報
      .progress-status
      .progress-status_bar
    %li.active#active
      電話番号認証
      .progress-status
      .progress-status_bar
    %li.address#address
      お届け先住所入力
      .progress-status
      .progress-status_bar
    %li.payment#payment
      支払い方法
      .progress-status
      .progress-status_bar
    %li.end#end
      完了
      .progress-status
      .progress-status_bar

progress.scss

.progress {
    padding: 40px 0 0 44px;
    border: 0;
    display: inline-block;
    vertical-align: top;
    font-size: 0;
    text-align: center;
    &-bar{
      margin: 0;
      li{
        margin: 0 40px 0 0;
        padding: 0;
        position: relative;
        z-index: 40;
        display: inline-block;
        min-width: 60px;
        font-size: 12px;
        color: gray;
        .progress-status{
          position: absolute;
          left: 40%;
          width: 12px;
          height: 12px;
          margin: 8px auto 0;
          background: gray;
          border-radius: 50%;
          z-index: 30;
        }
      }
    }
  }

// デフォルトのプログレスバー
.progress-status_bar {
  position: absolute;
  left: 50%;
  top: 25px;
  bottom: 5px;
  display: block;
  width: 130px;
  height: 2px;
  background: gray;
  z-index: 10;
}

.end .progress-status_bar {
  width: 0px;
}
.payment .progress-status_bar {
  width: 100px;
}
#through{
  color: #ea352d;
  .progress-status{
    background: #ea352d;
  }
}

#through .progress-status_bar{
    background: #ea352d;
  }
  #active{
    color: #ea352d;
    .progress-status{
      background: #ea352d;
    }
  }

무엇을 하고 있는지 말하면, 바의 위치를 ​​움직이고 있을 뿐입니다.
이런 느낌의 코드로 변경하면・・・이런 외형이 됩니다.

progress.scss

.progress-status_bar {
  position: absolute;
  bottom: 5px;
  right: 0%;
  display: block;
  content: '';
  width: 100%;
  height: 2px;
  background: gray;
}

이런 느낌이 듭니다. 앞으로 위치 조정을 하면 0K입니다!
htps : // 코데펜. 이오 / 미 l0516 / 펜 / dLrZvz
⬆️ 여기에 코드를 올릴 때. Fuck 봐.

부분적으로 색을 바꾸고 싶을 때는, HTML에 id명을 작성해 아래와 같이 기술하면 OK입니다. 값의 우선도가 1위 의 기술이 되도록 해 주세요.


progress.scss

#through{
  color: #ea352d;
  .progress-status{
    background: #ea352d;
  }
}

#through .progress-status_bar{
    background: #ea352d;
  }
  #active{
    color: #ea352d;
    .progress-status{
      background: #ea352d;
    }
  }

페이지에 따라 빨간색 변경을 원하면,

signup1.html.haml

.signup_address
  = render 'signup-header'

처럼

progress.scss

.signup_address{
  #through .progress-status_bar{
    background: #ea352d;
  }
  #active{
    color: #ea352d;
    .progress-status {
      background: #ea352d;
    }
    .progress-status_bar{
      background: #ea352d;
    }
  }
  #address{
    color: #ea352d;
    .progress-status {
      background: #ea352d;
    }
  } 
}

CSS 측에서 조건을 붙이는 것이 가장 쉬운 방법입니다.
jQ에서 위와 같은 페이지에 따라 외형이 바뀌는 사양을 구현할 때. .
페이지의 시스템에 따라서는 적응할 수 없는 경우가 있는 것 같습니다.
저도 신규 등록 페이지에서 jq에서 구현이 어려웠기 때문에 포기하고 있습니다 · · ·
거기까지 동적으로 고집할 필요도 없기 때문에, css로 대응했습니다.