フレームワークを使わないで縦向きプログレスバーの実装方法を考える

概要

プログレスバーを描けるWebフロントのフレームワークはいくらでもあると思う（知らんけど）。
でもあんまり縦方向のプログレスバーって見たことないな、と思ったので手動実装してみた。

前提

この記事は以下のような人間が書いています

• ぶっちゃけBootstrapも使ったことないよ
• もっと言うとjQueryUIでフロントのフレームワークは止まってるよ
• ごめんjQueryUIは言い過ぎた、Materializeだよ
• HTMLはマークアップ言語なんだから空の<div />とか使いたくないよ
• React.jsはこれから勉強するよ
• もうずっとWebトレンドに触れてないからよくわかんないよ
• もうマルチデバイス対応とか目指してないよ

結果

出来上がったものがこちらになります（ドン

実装

実装はそれこそ「試験管に中身を足していく」感じだと思ってもらえればいいよ

普通のプログレスバー

CSS

      .app {
        display: inline-block;
        margin: 8px;
      }
      .app .progress {
        margin-bottom: 8px;
        border: solid 1px #ccc;
        width: 32px;
        height: 256px;
        overflow: hidden;
      }
      .app .progress__fill {
        background-color: #99ccff;
        height: 100%;
      }
      .app .progress__fill--max {
        background-color: #336699;
        height: 100%;
      }

HTML

    <div class="app">
      <div class="progress">
        <div class="progress__fill--max"></div>
      </div>
      <div class="reward">
        <div class="reward__value">100%</div>
      </div>
    </div>
    <div class="app">
      <div class="progress">
        <div class="progress__fill" style="margin-top:128px"></div>
      </div>
      <div class="reward">
        <div class="reward__value">50%</div>
      </div>
    </div>

.progress__fillのmargin-topのプロパティ値はjQueryで弄るなりReactで再描画するなりすればいいと思うよ
ところで手癖でBEM使ったけど今どきのCSS命名規則って何がメジャーなの？

試験管っぽいプログレスバー

そもそも何がやりたかったかってこれがやりたかった

CSS

      .app2 {
        display: inline-block;
        margin: 8px;
      }
      .app2 .progress {
        margin-bottom: 8px;
        border: solid #ccc;
        border-width: 0px 1px 1px 1px;
        width: 32px;
        height: 256px;
        overflow: hidden;
        border-radius: 0 0 20px 20px;
        padding: 4px;
      }
      .app2 .progress > div {
        display: inline-block;
      }
      .app2 .progress__fill, .app2 .progress__fill--max {
        height: 100%;
        width: 100%;
        border-radius: 0 0 20px 20px;
      }
      .app2 .progress__fill {
        background-color: #99ccff;
      }
      .app2 .progress__fill--max {
        background-color: #336699;
      }
      .app2 .progress__highlight {
        background-color: #fff;
        width: 8px;
        height: 236px;
        position: relative;
        left: 20px;
        top: -256px;
        opacity: 0.8;
      }

HTML

    <div class="app2">
      <div class="progress">
        <div class="progress__fill--max"></div>
        <div class="progress__highlight"></div>
      </div>
      <div class="reward">
        <div class="reward__value">100%</div>
      </div>
    </div>
    <div class="app2">
      <div class="progress">
        <div class="progress__fill" style="margin-top:128px; height: 128px;"></div>
        <div class="progress__highlight"></div>
      </div>
      <div class="reward">
        <div class="reward__value">50%</div>
      </div>
    </div>

CSSで.progressの上辺消して底を丸めると結構それだけで試験管っぽさあるよ
「あれ？ハイライトも入れられるんじゃね？」と思って.progress__highlightを追加してみた
ポイントはハイライトは試験管の上端の少し下からカーブ直前まで、光源を意識して配置することだよ

で？

今回はとにかく実装できるか試したかったのでCSSで試験管作ってみたけど、「前提」でも述べた通りマークアップ言語であるHTMLにわけわかんないタグ入れたくないので試験管は画像で実装するよ
fillを宝石とかのテクスチャにしてジェムとか貯めるゲームに使えるかもね