浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

配送進捗バーをhtmlとcssだけで作ってみた

amazonやメルカリでも使われている配送状況をお知らせする

配送フローチャートを作りました。

html

<div class="bar">
  <div class="ellipse"></div>
  <div class="line"></div>
  <div class="ellipse"></div>
  <div class="line"></div>
  <div class="ellipse"></div>
  <div class="line"></div>
  <div class="ellipse"></div>
</div>
<div class="text-box">
  <p class="text">配送前</p>
  <p class="text">配送中</p>
  <p class="text">荷物到着</p>
  <p class="text">受取済み</p>
</div>

CSS

.bar{
  display: flex;
  justify-content: center;
}
.ellipse{
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #43A047;
}
.line {
  width: 70px;
  height: 4px;
  border-radius: 5%;
  background-color: #43A047;
  margin-top: 4px;
}
.text-box{
  display: flex;
  justify-content: center;
  font-size: 11px;
}
.text{
  margin: 0px 18px 0px 25px;
}

使う場合は、文字列の長さを意識してください。
(長さによって少しズレが生じるのでtextのmarginで調整してください。)

  • この記事いいね! (0)