プログレスバーを扱ってみた

プログレスバーとは

今回作ったのはこんな感じのバーです。

個人的には進捗バーって呼んでました。
簡潔に言うと、ある処理がどれぐらい進んでいるかを可視化したやつって感じですかね☺️

詳しくはWikipediaでもみてもらえると。

担当画面をFigmaでデザイン見た時どうやって作るんだろうと思ったんですけど、簡単に作れたのでメモ書きしようかなと思います。

実装内容

使ったのは<progress>タグです。
はい、今回初めて知りました笑

<progress></progress>
これを書くと何やらバーが表示されます。

これだけではただのバーなので、max属性とvalueを足してみましょう。
max属性とは最大値なので、今回は最大を100%として100と設定します。
value属性はどれくらい完了しているかの値なので、今回は75%完了しているとして75と設定します。
<progress max="100" value="75"></progress>

おぉ、良いですね！！

よくあるローディングのように動的にパーセンテージが変わっていくようなものだと、JSを使う必要がありそうです。
でも今回は固定の数字で表示するだけなので簡単に実装することが出来ました😊

色変更について

ちょっと面倒くさかったのは、バーの色変更でした。
ウェブブラウザによって初期色やCSSの当て方が変わるのでそこだけ注意ですね。

今回対応したのは

-webkit- /* Chrome/Safari/iOS系ブラウザ */
-moz- /* Firefox */

だけなので、

progress {
  -webkit-appearance: none; /* プログレスバーのスタイルをリセット */
  -moz-appearance: none; /* プログレスバーのスタイルをリセット */
  background-color: #fff; /* プログレスバーの背景色/-moz- 用 */
}
::-webkit-progress-bar {
  background-color: #fff; /* プログレスバーの背景色/-webkit- 用 */
}
::-webkit-progress-value {
  background-color: red; /* プログレスバーの進捗部分色/-webkit- 用 */
}
::-moz-progress-bar {
  background-color: red; /* プログレスバーの進捗部分色/-moz- 用 */
}

こんな感じで対応しました。

まとめ

よく見るけど、どうやって作るのかなと思ってたので実装出来て良かったです！

色々な場面で使えそうなタグで、尚且つ簡単に扱えたので便利だなって思いました。