ProgressBar(Prototype)

by bc_rikko

HTML

<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>

CSS

.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;
}

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(); });