[JS]SVGを使った滑らかで美しいアニメーションのプログレスバーを簡単に実装できるスクリプト -ProgressBar.js

Post on:2014年10月20日

SVGを使った滑らかで美しいアニメーションのプログレスバーを簡単に実装できるスクリプトを紹介します。

レスポンシブ対応で、描く形状はライン・スクエア・サークル・トライアングル以外にもパスでオリジナルの形状にすることもできます。

デモのアニメーション

ProgressBar.js -GitHub

ProgressBar.jsのデモ

デモはChrome, Safari, Firefox, Opera, IEは9+でご覧ください。

サイトのキャプチャ

ProgressBar.js

まずは一番シンプルなラインのデモから。
※各デモをアニメーションGIFにしてみました。

デモのアニメーション

Line: オレンジ色のラインをアニメーションで描きます。

デモのアニメーション

Circle: これもシンプルなデモで円の外周を描きます。

デモのアニメーション

Clock: 円の外周とカウントを連動させます。

デモのアニメーション

Custom Shaped Path: 最後はパスを設定して描きます。

ProgressBar.jsの使い方

Step 1: 外部ファイル

当スクリプトを外部ファイルとして記述します。

<body>
  ...
  <script src="js/progressbar.js"></script>
</body>

Step 2: HTML

一つ目のデモ「Line」を例に。
プログレスバーを配置する要素をdivなどで用意します。

<div class="example-container" id="example-line-container"></div>

Step 3: JavaScript

「Line」を描くには下記のように指定します。

var element = document.getElementById('example-line-container');
var line = new ProgressBar.Line(element, {
    color: "#FCB03C",
    trailColor: "#aaa"
});

line.animate(1, function() {
    line.animate(0);
})

「Circle」を描く時は「circle」を使い、ストロークのサイズを指定します。

var element = document.getElementById('example-circle-container');
var circle = new ProgressBar.Circle(element, {
    color: "#FCB03C",
    strokeWidth: 2,
    fill: "#aaa"
});

circle.animate(1, function() {
    circle.animate(0);
})

sponsors

top of page

©2024 coliss