シンプルなプログレスバーを作成してみた

簡素な物ですが、
シンプルなプログレスバーのCSSスニペットを作ってみたので投稿。

#プログレスバーとは？
プログレスバー（英: Progress Bar）とは、長時間かかるタスクの進捗状況がどの程度完了したのかを視覚的・直感的に表示するもので、グラフィカルユーザインタフェースの要素（ウィジェット）の一つである。（Wikipediaより）

youtubeの再生時間を表示しているバー、ファイルのダウンロード中の「～％完了」のバー等が代表的ですね！
今回はjQueryを使用せずにページ全体のフォームの入力状態の進捗を表す、入力フォーム用のプログレスバーを作成してみました。

#作成したCSSスニペットのサンプル
下部のタブから表示を「0.5x」(スマホの場合は横画面にすると表示されると思います)に小さくしてサンプルの入力欄に文字を入力してみて下さい。

See the Pen Simple ProgressBar by torajiro_u (@torajiro_u) on CodePen.

文字を入力すると、上部のバーが動きフォームの入力の進捗度合を示してくれます。
これが今回作成した機能となります。
また、上のサンプルから全体のソースの確認が可能です。

#HTML部分機能内容
Javascriptのファイルを読み込ませ、「body」に「onload="taisyou()"」を設定するのみです。
「body」が読み込まれると自動でプログレスバーの動作に必要な処理が行われます。
CSSスニペットとして、導入を簡単にすることを意識して作成しました。

#CSS部分機能内容
下の部分がプログレスバーに関係するcssです。

.css

/* progressbar部分
-------------------------------*/
body {
  margin: 0px;
}
.app {
  width: 100%;
  padding: 0px;
  background-color: white;
}
.progress {
  width: 100%;
  height: 10px;
  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;
}

■「.app」がプログレスバーを配置する場所

■「.progress」がプログレスバーを表示する為の枠部分
　・背景が白のページなので色をホワイトスモークに設定しています。

■「.progress-bar」が動作するバー部分
　・transitionがバーが伸び縮みする際のアニメーションの設定です。
　・フォーム入力時のjsの処理の結果、ここにwidthの%を設定することでバーを伸び縮みさせています

#JS部分機能内容
処理部分です。

.js

var step;
var forms = document.querySelectorAll("form");
var allinp = 0;
var p;

function taisyou(){
  p = new Progress(0);
  for(var i = forms.length;i--;){
    var inp = forms[i].querySelectorAll("input[type='text'],textarea,select");
    allinp += inp.length; //プログレスバーの進捗の対象を数える
    for(var j = inp.length;j--;){
      inp[j].setAttribute("onChange","koushin(this)");
    }
  }
  step = 100/allinp;//プログレスバーが一度の進捗で進む％
}

function koushin($this){//入力内容が更新されるたびにプログレスバーの進捗の状態を再計算する
  var elem = $this;
  if($this.value){
    var text = $this.value;
    elem.className = 'up';//入力内容がnullではない場合にクラス名を変更
  }else{
    elem.className = '';
  }
  var nowUp = document.getElementsByClassName('up');//変更したクラス名の数を計算
  var status = allinp - (allinp - nowUp.length);
  p = status*step;
  new Progress(p);//バーに反映させるファンクションを呼び出す
}


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 + '%';
    };
    return Progress;
}());

■「taisyou()」ファンクション
　・bodyが読み込まれると同時に処理が走ります。
　・バーの進捗を初期化（０％）します。
　・form配下のinput等バーの進捗に影響を与えさせる要素の数を算出します。
　・100をバーの進捗に影響を与える要素の数で割り1進捗で何%進むか設定します。
　・バーの進捗に影響を与える要素に「onChange="koushin(this)"」イベントを設定します。

■「koushin($this)」ファンクション
　・onChangeイベントが設定された箇所に入力が行われる度に処理を実行し入力
内容を確認します。
　・入力内容がnullではない時にクラス名を「up」に変更します。
　・ページ内の「up」と名前のついたクラスの数を確認し、その時バーは何％の進捗か計算します。
　・バーに進捗を反映させるファンクションに算出した％を渡します。

■「Progress(p)」ファンクション
　・「koushin($this)」ファンクションで算出したバーの進捗率(p%)を「.progress-bar」のwidthに設定することでバーを動作させます。

#最後に
今回作成した機能はとてもシンプルかつ、ほぼ最低限度動作するだけのものなので
入力の進捗率によってバーの色を変えてみたり等色々改修を加えていくのも面白そうだなと思いました。