Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

概要

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

前提

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

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

結果

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

progressbar.png

実装

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

普通のプログレスバー

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

wifeofvillon
孫請けSIer→フリーランスコーダー→QAバイト
drivemode
No-look freedom for driving.
http://drivemode.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away