SVGの綺麗なプログレスバーを簡単に実装する #JavaScript

アプリケーション開発していると、必ず必要になるプログレスバーですが
SVGで滑らかで綺麗なプログレスバーを簡単に実装する方法を紹介します。

ProgressBar.js

ProgressBar.jsを使うと、簡単に滑らかなプログレスバーを実装できます。

色々な形のプログレスバーに対応していて、カスタム次第ではハート形のプログレスバーも作れます。

実装

一番シンプルな実装は以下の通りです。
プログレスバーの色をForm,Toで指定して進捗によって色を変えることも可能です。

引用： https://kimmobrunfeldt.github.io/progressbar.js/

var ProgressBar = require('progressbar.js');

// Assuming we have an empty <div id="container"></div> in
// HTML
var bar = new ProgressBar.Line('#container', {easing: 'easeInOut'});
bar.animate(1);  // Value from 0.0 to 1.0

http://タイマー.co

KPTなど、チームで時間を決めてMTGする際、
スクリーンに映すと便利なタイマーアプリです。

本記事の技術を使って、開発しています。