学校の友達と一緒にweb制作をすることになって、プログレスバーを実装しようという話になったときに見つけたプラグインです。
実装がすごく簡単ですごく衝撃的でしたので、忘れないうちにメモ。
1. jQueryを読み込む
|
1 |
<script src="js/jquery-1.11.2.min.js"></script> |
jQueryを読み込みます。
2. PACE.jsをダウンロードして読み込む
公式サイトのDownloadからダウンロードします。
そのあとに、headタグ内に
|
1 |
<script type="text/javascript" src="js/pace.min.js"></script> |
を記述します。
3. 公式サイトから好きな形のプログレスバーのCSSをコピペする
公式サイトのDownloadの下にThemesという項目があるので、好きな形を選んで下さい。
わたしはCenter Simpleにしました。
また、CSSの記述をいじると太さや色が変えられます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
.pace { -webkit-pointer-events: none; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; z-index: 2000; position: fixed; margin: auto; top: 0; left: 0; right: 0; bottom: 0; height: 5px; width: 200px; background: #fff; border: 1px solid #29d; overflow: hidden; } .pace .pace-progress { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); max-width: 200px; position: fixed; z-index: 2000; display: block; position: absolute; top: 0; right: 100%; height: 100%; width: 100%; background: #29d; } .pace.pace-inactive { display: none; } |
こちらが元のソース。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
.pace { -webkit-pointer-events: none; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; z-index: 2000; position: fixed; margin: auto; top: 0; left: 0; right: 0; bottom: 0; height: 4px; width: 100%; background: #fff; border: 1px solid #fd9; overflow: hidden; } .pace .pace-progress { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); max-width: 2000px; position: fixed; z-index: 2000; display: block; position: absolute; top: 0; right: 100%; height: 100%; width: 100%; background: #fd9; } .pace.pace-inactive { display: none; } |
今回わたしが使用したのがこれ。
プログレスバーの色や太さをいじっています。
.paceの記述内のborderで外枠の太さ、色、形、widthで長さが変えられます。
他にもいろいろ遊んでみるのも楽しそうです……。