2016/03/06

【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-barwidth プロパティを変更しているだけだ。それをちょっとオブジェクト指向っぽく書いている。



完成!



今回はボタンをクリックすると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

0 件のコメント :

コメントを投稿