2018年6月18日

デザイン

プログレスバーを簡単に実装できるprogressbar.js

progressbar.js プログレスバーライブラリ

はじめに

本記事では、プログレスバーを簡単に実装できるprogressbar.jsをご紹介します。

こちらのライブラリは以前からありますが、ちょこちょこアップデートされているので改めてどんなことができるのか、どういった特徴があるのかなどを振り返っていきたいと思います。

また、bageleeでは以前画像に簡単にアニメーションをつけるライブラリもご紹介してますので、ぜひご覧ください。
画像に簡単にアニメーションをつけるcurtain.js

progressbar.jsとは

progressbar.jsは簡単にスタイリッシュでレスポンシブ対応をしているプログレスバーをSVGパスで作れることができるライブラリです。

モバイルデバイスでもアニメーションが崩れることなく綺麗に表示されるだけでなく、線のバー、丸のバー、半円のバーなどシェイプにも種類がいくつかあり、さらにカスタムでシェイプを作ることもできます。

こちらの公式サイトもアップデートされています。

progressbar.jsのGithubリポジトリ

Github上にコードが公開されています。

kimmobrunfeldt/progressbar.js

Open Sourceのプロジェクトなので自由にIssueやPull Requestを出すことができます。

デモ

progressbar.jsでできることは下記デモで見ることができます。

シンプルなプログレスバーができるのはもちろん、パーセント表示を出したり、色で変化を出したり、アニメーションに変化をつけたりいろんなことができます。

progressbar.jsのデモ

こちらの他にもファイルのアップロード時のプログレスバーのデモもあります。

ファイルのアップロード時のプログレスバーのデモ

また、パスワードの強度を視覚的に見せるデモもあります。

パスワードの強化のプログレスバーのデモ

使い方

では、実際にprogressbar.jsに使い方をご紹介します。

インストール方

インストール方法は大きく3つあります。

Npm:

npm install progressbar.js

Bower:

bower install progressbar.js

手動:
dist/progressbar.jsもしくはdist/progressbar.min.jsを入れる

scriptタグなどで直接読み込むこともできます

<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/master/dist/progressbar.js"></script>
<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/master/dist/progressbar.min.js"></script>

ベーシックなプログレスバーを作る

HTML

こちらはとても簡単でプログレスバーを入れたいdivにIDをふるだけです。

<div id="container"></div>

CSS

必要なスタイルを当てます。

#container {
  margin: 20px;
  width: 400px;
  height: 8px;
}

JavaScript

ベーシックなプログレスバーを呼び出します。

var bar = new ProgressBar.Line(container, {
  strokeWidth: 4,
  easing: 'easeInOut',
  duration: 1400,
  color: '#FFEA82',
  trailColor: '#eee',
  trailWidth: 1,
  svgStyle: {width: '100%', height: '100%'}
});

bar.animate(1.0);

デモ

コードをrerunすると動いているプログレスバーが見れますt

See the Pen wXPXWY by Ayaka Sasaki (@ayausaspirit) on CodePen.

もう少し凝ったプログレスバーを作る

HTML

前回と同様containerを用意します。

<div class="rotating progress" id="progress"></div>

CSS

ベーシックなスタイルに加えて、円をくるくると回すアニメーション、rotatingを作ってかけています。
ベンダープレフィックスは省略してますので、必要に応じてかけてあげてください。

.progress {
    height: 80px;
    width: 80px;
    margin: 50px auto;
}
.progress > svg {
    height: 100%;
    display: block;
}
@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.rotating {
  animation: rotating 2s linear infinite;
  transform-origin: 50% 50%;
}

JavaScript

先ほどと同様ベーシックなプログレスバー（今回の場合はcircle）を呼び出し、x秒ごとにanimateメソッドでプログレスを増やしています。

window.onload = function onLoad() {
    var circle = new ProgressBar.Circle('#progress', {
        color: '#555',
        trailColor: '#eee',
        strokeWidth: 10,
        duration: 2500,
        easing: 'easeInOut'
    });

    circle.set(0.05);

    setTimeout(function() {
        circle.animate(0.3);
    }, 1000);

    setTimeout(function() {
        circle.animate(0.4);
    }, 3500);

    setTimeout(function() {
        circle.animate(0.8);
    }, 5500);

    setTimeout(function() {
        circle.animate(1);
    }, 8000);
};