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

# 概要

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

# 前提

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

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

# 結果

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

![progressbar.png](https://qiita-image-store.s3.amazonaws.com/0/95607/6cb4bee5-e27a-38e9-5ece-6b84262543c3.png)

# 実装

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

## 普通のプログレスバー


### CSS
```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
```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
```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
```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を宝石とかのテクスチャにしてジェムとか貯めるゲームに使えるかもね