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コードをコピペする

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

無料のドメインを取得してレンタルサーバーに設定する方法

通信量無制限!? 隣近所のWiFiをシェアして利用し放題にする注目のサービス「シェアWiFi」

背景に使いたい！美しくカラフルなトライアングルメッシュ画像をSVGとして作成できるjsライブラリー「Trianglify」

CSSスプライト作成の決定版！これ以上ない使いやすさの「Spritebox」

CSS3の色名147色（RGB、HEX16進カラーコード併記）

いまさら聞けない無料でオリジナルなアイコンフォントを作る方法・利用する方法

WordPressにベストな格安レンタルサーバーはこれです！

コード/js不要！ドラッグ＆ドロップだけでCSSイメージスライダーがつくれるアプリ「cssSlider」

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

40以上のホバーエフェクトをCSSだけで実装できる「Hover.Css」