PACE.js

学校の友達と一緒にweb制作をすることになって、プログレスバーを実装しようという話になったときに見つけたプラグインです。
実装がすごく簡単ですごく衝撃的でしたので、忘れないうちにメモ。

PACE.js

1. jQueryを読み込む

jQueryを読み込みます。

2. PACE.jsをダウンロードして読み込む

公式サイトのDownloadからダウンロードします。
そのあとに、headタグ内に

を記述します。

3. 公式サイトから好きな形のプログレスバーのCSSをコピペする

公式サイトのDownloadの下にThemesという項目があるので、好きな形を選んで下さい。
わたしはCenter Simpleにしました。

また、CSSの記述をいじると太さや色が変えられます。

こちらが元のソース。

今回わたしが使用したのがこれ。
プログレスバーの色や太さをいじっています。

.paceの記述内のborderで外枠の太さ、色、形、widthで長さが変えられます。
他にもいろいろ遊んでみるのも楽しそうです……。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です