【JavaScript】ライブラリを使わずにプログレスバーを実装する

プログレスバーを使いたいけどそのためだけにBootstrapやjQueryを入れるのもなぁ…。
ということで、JavaScriptでプログレスバーを実装してみた。

HTML/CSS

<div class="app">
  <p>進捗: <button id="up">+</button> <button id="down">-</button></p>

  <div id="prog-bar" class="progress">
    <div class="progress-bar">
    </div>
  </div>
</div>

.progress がプログレスバーの外枠。
.progress-bar がプログレスバーの中身。
この辺はBootstrapと同じ。


ちなみに今回は「+」と「-」のボタンをクリックすると10%ずつ動くようにしている

.app {
  height: 500px;
  width: 100%;
  padding: 10px;
  background-color: white;
}

.progress {
  width: 100%;
  height: 30px;
  background-color: #F5F5F5;
  border-radius: 4px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
}

.progress-bar {
  transition: width 0.5s linear;
  height: 100%;
  background-color: #337AB7;
  border-radius: 4px;
}

.progress はプログレスバーの外枠なので、width: 100%固定で表示している。
.progress-bar はプログレスバーの中身なので、widthプロパティはJavaScriptで変更する。
また transitionプロパティ で width の値が変わった時に0.5秒かけて変化するようにしている。

ちなみに transitionプロパティは

• transition-property　:効果を適用するCSSプロパティ
  • all　:変化できるすべてのプロパティが変化する
  • none　:どのプロパティも変化しない
  • {プロパティ名}　:変化させたいプロパティ名（カンマ区切りで指定可）
• transition-duration　:変化にかかる時間
• transition-timing-function　:変化の仕方
  • linear　:一定に変化する
  • ease　:開始と終了が滑らかになる
  • ease-in　:ゆっくり始まる
  • ease-out　:ゆっくり終わる
  • ease-in-out　:ゆっくり始まり、ゆっくり終わる
  • cubic-bezier　:好きなように設定
• transition-delay　:変化を遅らせる時間

ショートハンドで書くと「transition: transition-property transition-duration transition-timing-function transition-delay」となる。

JavaScript

var Progress = (function () {
 function Progress (p) {
    this.bar = document.querySelectorAll('#prog-bar > .progress-bar')[0];
    this.p = p;
    this.update();
  };
  Progress.prototype.update = function ()  {
    this.bar.style.width = this.p + '%';
  };
  Progress.prototype.countup = function () {
    if (this.p < 100) { this.p += 10; }
    this.update();
  };
  Progress.prototype.countdown = function () {
    if (0 < this.p) { this.p -= 10; }
    this.update();
  };
  return Progress;
}());

var up = document.getElementById('up');
var down = document.getElementById('down');
var p = new Progress(0);

up.addEventListener('click', function (e) { p.countup(); });
down.addEventListener('click', function (e) { p.countdown(); });

なんというかゴチャゴチャ書いているが、ボタンがクリックされたら .progress-bar の width プロパティを変更しているだけだ。それをちょっとオブジェクト指向っぽく書いている。

完成！

今回はボタンをクリックすると10%ずつ変化するようになっているが、この変化を変えてあげればいろんなことに応用できるだろう。

おまけ（TypeScriptで実装した場合）

class Progress {
 private p: number;
 private bar = document.querySelectorAll('#prog-bar > .progress-bar')[0];

 constructor (p: number) {
   this.p = p;
    this.update();
  }
  private update() {
   this.bar.style.width = this.p + '%';
  }  
  countup() {
   if (this.p < 100) { this.p += 10; }
    this.update();
  }
  countdown() {
   if (0 < this.p) { this.p -= 10; }
    this.update();
  }
}

var up = document.getElementById('up');
var down = document.getElementById('down');
var p = new Progress(0);

up.addEventListener('click', () => { p.countup(); });
down.addEventListener('click', () => { p.countdown(); });

以上

written by @bc_rikko