配送状況やステップなどを視覚化するプログレスバーを作ってみた

※当サイトにはプロモーションが含まれています。

クライアントクライアント

現在の進捗状況をユーザが確認できるものをCSSで作ってくれ

にゃテックにゃテック

おけまるだにゃ

Amazonやヤマト運輸などで配送状況や、現在の状況などを表わすのに下記のようなプログレスバーがよく利用されています。

プログレスバー例

今回は、下記のような進捗状況を確認できるプログレスバーをCSSで作ってみました。

注文済み
発送済み
配達中
配達済み
にゃのらいとにゃのらいと

サンクスページなどの進捗確認としても使えそうだにゃ。

配送状況やステップなどを視覚化するプログレスバーのCSS

配送状況やステップなどを視覚化するプログレスバーのHTMLとCSSです。

HTML

<div class="nya-progress-bar" data-step="1">
<div class="nya-fill-line"></div>
<div class="nya-step nya-active">
<div class="nya-circle"></div>
<div class="nya-label">注文済み</div>
</div>
<div class="nya-step nya-active">
<div class="nya-circle"></div>
<div class="nya-label">発送済み</div>
</div>
<div class="nya-step">
<div class="nya-circle"></div>
<div class="nya-label">配達中</div>
</div>
<div class="nya-step">
<div class="nya-circle"></div>
<div class="nya-label">配達済み</div>
</div>
</div>

data-step=”1″の部分を、0～3に変えるだけで着色される線の進捗を変更できます。

.step要素に、nya-activeを付けることで「○」の部分が着色されます。

CSS

.nya-progress-bar {
display: flex;
justify-content: space-between;
position: relative;
max-width: 720px;
margin: auto;
}

.nya-progress-bar::before {
content: "";
position: absolute;
top: 8px;
left: calc(12.5%);
width: 75%;
height: 6px;
background-color: #ccc;
z-index: 1;
}

.nya-fill-line {
position: absolute;
top: 8px;
left: calc(12.5%);
height: 6px;
background-color: #007e9e;
z-index: 2;
transition: width 0.4s ease;
}

.nya-progress-bar[data-step="0"] .nya-fill-line { width: 12.5%; }
.nya-progress-bar[data-step="1"] .nya-fill-line { width: 37.5%; }
.nya-progress-bar[data-step="2"] .nya-fill-line { width: 62.5%; }
.nya-progress-bar[data-step="3"] .nya-fill-line { width: 75%; }

.nya-step {
position: relative;
text-align: center;
flex: 1;
z-index: 3;
}

.nya-circle {
width: 20px;
height: 20px;
margin: 0 auto 5px;
background: #ccc;
border-radius: 50%;
border: 3px solid #ccc;
transition: all 0.3s ease;
}

.nya-label {
font-size: 1em;
color: #333;
}
.nya-step.nya-active .nya-circle {
background: #007e9e;
border-color: #007e9e;
}

.nya-step.nya-active .nya-label {
font-weight: bold;
}

着色される線の長さは、下記の部分で調整しています。

.nya-progress-bar[data-step="0"] .nya-fill-line { width: 12.5%; }
.nya-progress-bar[data-step="1"] .nya-fill-line { width: 37.5%; }
.nya-progress-bar[data-step="2"] .nya-fill-line { width: 62.5%; }
.nya-progress-bar[data-step="3"] .nya-fill-line { width: 75%; }

例えば、○の部分で線を止めたい場合は、下記のようにします。

.nya-progress-bar[data-step="0"] .nya-fill-line { width: 0%; }
.nya-progress-bar[data-step="1"] .nya-fill-line { width: 25%; }
.nya-progress-bar[data-step="2"] .nya-fill-line { width: 50%; }
.nya-progress-bar[data-step="3"] .nya-fill-line { width: 75%; }

なお、右端の終点部分まで、線を着色する場合でも、widthは100%ではなく75%なので注意してください。

STEP1
STEP2
STEP3
STEP4

なお、HTMLは次のように記載しています。

<div class="nya-progress-bar" data-step="2">
<div class="nya-fill-line"></div>
<div class="nya-step nyan-active">
<div class="nya-circle"></div>
<div class="nya-label">STEP1</div>
</div>
<div class="nya-step nya-active">
<div class="nya-circle"></div>
<div class="nya-label">STEP2</div>
</div>
<div class="nya-step nya-active">
<div class="nya-circle"></div>
<div class="nya-label">STEP3</div>
</div>
<div class="nya-step">
<div class="nya-circle"></div>
<div class="nya-label">STEP4</div>
</div>
</div>

最後に、動作確認用として、HTMLとCSSをまとめたものも掲載しておきます。

HTMLとCSSのまとめ

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>配送状況バー</title>
<style>
body {
font-family: sans-serif;
padding: 30px;
}
.nya-progress-bar {
display: flex;
justify-content: space-between;
position: relative;
max-width: 720px;
margin: auto;
}
.nya-progress-bar::before {
content: "";
position: absolute;
top: 8px; /* ●の中心 */
left: calc(12.5%);
width: 75%;
height: 6px;
background-color: #ccc;
z-index: 1;
}
.nya-fill-line {
position: absolute;
top: 8px; /* ●の中心 */
left: calc(12.5%);
height: 6px;
background-color: #007e9e;
z-index: 2;
transition: width 0.4s ease;
}
.nya-progress-bar[data-step="0"] .nya-fill-line { width: 12.5%; }
.nya-progress-bar[data-step="1"] .nya-fill-line { width: 37.5%; }
.nya-progress-bar[data-step="2"] .nya-fill-line { width: 62.5%; }
.nya-progress-bar[data-step="3"] .nya-fill-line { width: 75%; }
.nya-step {
position: relative;
text-align: center;
flex: 1;
z-index: 3;
}
.nya-circle {
width: 20px;
height: 20px;
margin: 0 auto 5px;
background: #ccc;
border-radius: 50%;
border: 3px solid #ccc;
transition: all 0.3s ease;
}
.nya-label {
font-size: 1em;
color: #333;
}
.nya-step.nya-active .nya-circle {
background: #007e9e;
border-color: #007e9e;
}
.nya-step.nya-active .nya-label {
font-weight: bold;
}
</style>
</head>
<body>
<div class="nya-progress-bar" data-step="1">
<div class="nya-fill-line"></div>
<div class="nya-step nya-active">
<div class="nya-circle"></div>
<div class="nya-label">注文済み</div>
</div>
<div class="nya-step nya-active">
<div class="nya-circle"></div>
<div class="nya-label">発送済み</div>
</div>
<div class="nya-step">
<div class="nya-circle"></div>
<div class="nya-label">配達中</div>
</div>
<div class="nya-step">
<div class="nya-circle"></div>
<div class="nya-label">配達済み</div>
</div>
</div>
</body>
</html>

ちょっと複雑なので、色々とお試しください。

ご支援のお願い
この記事が役に立ったと感じたら･･･

Ny@Tech（にゃテック）

この記事が少しでもお役に立ったと感じていただけましたら、ぜひ下の“ボタン”をクリックしてお買い物をしていただけると嬉しいです。

ご購入いただいた商品の金額の一部が私に入り、より多くの有益な記事を作るための励みになります。

楽天でのお買物はこちら
Amazonでのお買物はこちら
※商品は、ご自身の好きなものをご購入ください