formなどで簡単に使用できるCSSだけで作れるステッププログレスバー

購入フォームなどで何個かステップがある場合、それを分けて表示する際にユーザーが現在どの作業中か知らせるプログレスバー。勝手にステッププログレスバーと名付けましたが、なんかしっくりきたので以下ステッププログレスバーと呼ぶことにします。

今回はそのステッププログレスバーをcssで実装してみましたので、もし今フォームの実装をしていて、かつステッププログレスバーを必要としている人はコピペしてどんどん使用してください。

DEMO

コード

html

<div class="container">
        <ul class="progressbar">
            <li class="">Basket</li>
            <li class="active">Delivery</li>
            <li>Confirm</li>
            <li>Done</li>
        </ul>
        <ul class="progressbar_02">
            <li class="">Basket</li>
            <li class="active">Delivery</li>
            <li>Confirm</li>
            <li>Done</li>
        </ul>
</div>

css

/* パターン1 */
		.progressbar {
		  margin: 0;
		  padding: 0;
		  counter-reset: step;
                  z-index: 0;
                  position: relative;
		}
		.progressbar li {
		  list-style-type: none;
		  width: 25%;
		  float: left;
		  font-size: 12px;
		  position: relative;
		  text-align: center;
		  text-transform: uppercase;
		  color: #aaa;
		}
		.progressbar li:before {
		  width: 30px;
		  height: 30px;
		  content: counter(step);
		  counter-increment: step;
		  line-height: 30px;
		  display: block;
		  text-align: center;
		  margin: 0 auto 10px auto;
		  border-radius: 50%;
		  background-color: #eee;
		}
		.progressbar li:after {
		  width: 100%;
		  height: 2px;
		  content: '';
		  position: absolute;
		  background-color: #eee;
		  top: 15px;
		  left: -50%;
		  z-index: -1;
		}
		.progressbar li:first-child:after {
		  content: none;
		}
		.progressbar li.active {
		  color: green;
		}
		.progressbar li.active:before {
		  background-color: #55b776;
		  color:#fff;
		}
		.progressbar li.active + li:after {
		  background-color: #55b776;
		}

		/* パターン2 */
		.progressbar_02 {
		  margin: 0;
		  padding: 0;
		  counter-reset: step;
		}
		.progressbar_02 li {
		  list-style-type: none;
		  width: 25%;
		  float: left;
		  font-size: 12px;
		  position: relative;
		  text-align: center;
		  text-transform: uppercase;
		  color: #aaa;
		  display: flex;
    	  align-items: center;
    	  justify-content: center;
		}
		.progressbar_02 li:before {
		  width: 30px;
		  height: 30px;
		  content: counter(step);
		  counter-increment: step;
		  line-height: 26px;
		  border: 2px solid #aaa;
		  display: block;
		  text-align: center;
		  border-radius: 50%;
		  background-color: #eee;
    	  margin-right: 10px;
		}
		.progressbar_02 li:first-child:after {
		  content: none;
		}
		.progressbar_02 li.active {
		  color: green;
		  font-weight: bold;
		}
		.progressbar_02 li.active:before {
		  background-color: #55b776;
		  color:#fff;
		  border-color:green;
		}
		.progressbar_02 li.active + li:after {
		  background-color: #55b776;
		}

基本的なCSSしか使用していませんが、説明すべき点をあげるならばcontent:counter(step)でしょうか。こちらでstep数を自動で表示するようにしています。
counter-increment: step;で要素が増えるたびにstepを+1してくれるので個数が増えても自動でなるような仕組みですね。こちらはstep数だけでなく自動で個数の連番をふりたいときとかにも使用できます。

あと、.progressbar li.active + li:afterでactiveクラスが付与されている隣のli要素のafterという指定です。上記DEMOで説明すると、step2がactiveの場合、step3のli要素のafter（円の左横の棒）が指定され、background-color: #55b776;で色を変更しています。

まとめ
CSSの基本的な知識+＠でステッププログレスバーが実装できるので、一度試してみてはいかがでしょうか？ +で隣り合う要素を指定する、counterで連番を自動で付与するなど他の箇所でも使える知識だと思いますのでどんどん利用してCSSのコードを少なくしましょう。

では。