2013/12/16

コピペで完了！12種類のプログレスバーを簡単に導入できるPACE.js

12種類のプログレスバーを簡単に導入できるPACE.js

PACE.jsは、プラグインを読み込んで、CSSだけで12種類のプログレスバーを表示できる、超お手軽なプログレスバーです。
PACE-—-Automatic-page-load-progress-bars
PACE — Automatic page load progress bars

PACE.jsの使い方：jQueryを読み込む

jQueryを読み込んでいない方はjQueryをまずは読み込んでください。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

1	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

PACE.jsの使い方：PACE.jsをダウンロードする

下記のPACE.jsのホームページから、PACE.jsをダウンロードします。
Downloadという見出しの、「PACE.js」というのがそうです。
右クリックで「リンク先を別名保存」してダウンロードします。
PACE — Automatic page load progress bars

PACE.jsの使い方：PACE.jsを読み込む

head内か、bodyタグの直前に先ほど読み込んだPACE.jsを読み込みます。

<script src="/pace/pace.js"></script>

1	<script src="/pace/pace.js"></script>

PACE.jsの使い方：お好みの種類のCSSコードをコピペする

12種類のプログレスバーの中からお気に入りを選択すればいいのですが、
もしデフォルトの色＝ブルーが嫌な場合には、Themeという見出しにの下にある「CHOOSE A COLOR」をクリックして、カラーピッカーで色を選択するとお好みの色に変えることができます。
改めて、お気に入りのプログレスバーの下に表示されている「DOWNLOAD」をクリックすると、CSSのコードが表示されます。
コードをコピーして、ご自分のCSSファイルにペーストしてやれば終了です。
簡単すぎるでしょ？

ちなみに、当サイトで使っているのは「Big Counter」です。

.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.pace.pace-inactive .pace-progress {
  display: none;
}

.pace .pace-progress {
  position: fixed;
  z-index: 2000;
  top: 0;
  right: 0;
  height: 5rem;
  width: 5rem;
}

.pace .pace-progress:after {
  display: block;
  position: absolute;
  top: 0;
  right: .5rem;
  content: attr(data-progress-text);
  font-family: "Helvetica Neue", sans-serif;
  font-weight: 100;
  font-size: 5rem;
  line-height: 1;
  text-align: right;
  color: rgba(0, 0, 0, 0.19999999999999996);
}

.pace {

-webkit-pointer-events: none;

pointer-events: none;

-webkit-user-select: none;

-moz-user-select: none;

user-select: none;

}

.pace.pace-inactive .pace-progress {

display: none;

}

.pace .pace-progress {

position: fixed;

z-index: 2000;

top: 0;

right: 0;

height: 5rem;

width: 5rem;

}

.pace .pace-progress:after {

display: block;

position: absolute;

top: 0;

right: .5rem;

content: attr(data-progress-text);

font-family: "Helvetica Neue", sans-serif;

font-weight: 100;

font-size: 5rem;

line-height: 1;

text-align: right;

color: rgba(0, 0, 0, 0.19999999999999996);

}

前の記事
「引き寄せの法則」は人を前向きにさせる！「ザ・シークレット」「法句経」でポジティブ思考になる

次の記事
無料のアイコンを検索・ダウンロードできるサイト12

コピペで完了！12種類のプログレスバーを簡単に導入できるPACE.js

12種類のプログレスバーを簡単に導入できるPACE.js

PACE.jsの使い方：jQueryを読み込む

PACE.jsの使い方：PACE.jsをダウンロードする

PACE.jsの使い方：PACE.jsを読み込む

PACE.jsの使い方：お好みの種類のCSSコードをコピペする

この記事を読んだ人はこんな記事も読んでいます

レスポンシブ対応済みサイトがApple Watchに対応しているかどうかがわかる「the ultimate responsive test」

レスポンシブWEBデザインなら導入したいレスポンシブ対応CSSフレームワーク35（〜2013年9月まで）

ブラウザでプログラミング！ブラウザでコードが書けて実行・確認できるサービス14

気になるサイトのモニタリング&変更箇所を知らせてくれる無料ツール6

未知との遭遇！クリックするたび何かに役立つサイトを紹介する「Random Useful Websites」

CSSだけで作られた決済代行・クレジット決済サービスの無料アイコン95種「PaymentFont」WEBフォントしても使える！

HTML,CSS,JSのコードを美しく整形し?部分の指摘もしてくれるDirty Markup

無料ホームページなのにプロ並みのデザイン＆高機能サイトが瞬時に作れるWix！感想と使い方

Chromeのタブをクリックするだけで音声を消す方法

プログラミング初心者がプログラミングを学ぶのにベストな海外チュートリアルサイト11