html＆CSS プログレスバー

##こんな感じのプログレスバーを作成する方法
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/365973/f1e226b4-afb5-4aab-a418-b5b981f1f66e.png)



```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;
}
```


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/365973/7b9a8390-a18b-32be-8af7-a3fff83b65d4.png)


こんな感じになります。これから位置調整をすれば0Kです！
https://codepen.io/mil0516/pen/dLrZvz
⬆️ここにコードを載せときます。弄ってみてください。

部分的に色を変えたい時は、HTMLにid名を作成して下記のように記述すればOKです。値の優先度が[第１位](https://qiita.com/oh_rusty_nail/items/e896825cd54e5c0a3666)の記述になるようにしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/365973/ac4b6d13-5713-e710-c76c-cdff6b71e6f4.png)

```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で対応しました。