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

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

タイポグラフィ/WEBフォントに関する作業を簡単にするツール14

信じられないほど美しい！CSSだけで絶滅危惧種30を表現した「In Pieces」

ナビゲーションだけが90以上！ナビゲーションメニューのプラグインやチュートリアルのコレクションサイト「NavNav」

使える！2015年時点で最高の無料レスポンシブ用フリーテンプレート50+

HTML5ビデオにも対応できる無料動画変換ツール/コンバーター10

無料で利用できる検索フォーム12（CSS3,HTML5,jQuery）

アイコンフォントはもはや常識！アイコンフォントを無料で利用できるサービスベスト10

UIデザインのリニューアル前と後を比較できるギャラリーサイト「Android UX before and after」

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

よくわかる初心者のためのCSSアニメーションチュートリアル