jQuery:「PROGRESS BAR.JS」を実装してみる

てっちゃん
てっちゃん

プログレスバーをjQueryプラグインを使って簡単に実装できます
公式サイトにいくつか紹介されているので、同じパターンであればコピーするだけであっという間です!

CSSだけで実装する場合はこちら

デモページ

01.準備

まずはGithubからprogressbar.jsをダウンロードしてきて、<head>~</head>内で読み込みます。

Github
https://github.com/kimmobrunfeldt/progressbar.js

progressbar.js

<head>~</head>内

<script src="../common/js/jquery-xxx(jQuery本体).js"></script>
<script src="js/progressbar/progressbar.js"></script>

ファイルのパスは任意です。都度変更してください。

たったこれだけで準備は整いました!

02.設置

公式サイトにいくつかパターンが用意されています
設置したいパターンを選んで、Edit exampleをクリックすると実際のコードが見れます!
それをそのままコピペするだけで設置できます!
カラーとかカスタマイズしたい場合は設置したコードを編集してください^^

公式サイト
https://kimmobrunfeldt.github.io/progressbar.js/

progressbar.js

progressbar.js

自分で作ったSVGでもできるみたいなので、いろいろ試してみてください!

デモページ

関連記事