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

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

オフラインでも便利なChrome機能拡張おすすめアプリ10

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

HTML/CSSをより見やすく！Google Chromeデベロッパーツールの機能拡張「SnappySnippet」が便利

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

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

便利すぎる！商用無料で高画質画像を配布するUnsplashがプレースホルダー画像生成サービスを開始

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

WEBデザインの勉強・参考に！プロがPhotoshopで作成したWEBサイト用無料PSDフリーテンプレート80

超簡単！CSSで上下左右センターにする方法

CSSアニメーションを使ったエフェクトライブラリー9