プログレスバーをjQueryプラグインを使って簡単に実装できます
公式サイトにいくつか紹介されているので、同じパターンであればコピーするだけであっという間です!
01.準備
まずはGithubからprogressbar.jsをダウンロードしてきて、<head>~</head>内で読み込みます。
Github
https://github.com/kimmobrunfeldt/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/
自分で作ったSVGでもできるみたいなので、いろいろ試してみてください!