
アプリケーション開発していると、必ず必要になるプログレスバーですが
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
KPTなど、チームで時間を決めてMTGする際、
スクリーンに映すと便利なタイマーアプリです。
本記事の技術を使って、開発しています。