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

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

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

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

美しいCSSグラデーションをランダムにつくってくれる「Random CSS Gradient Generator」

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

ショッピングカートだけの利用も無料！決済システムが充実したBASE（ベイス）が使える

CSS3だけで映画のエンドロール風エフェクトを表現した「Movie Credits」

グラフィックデザイナーのためのオンラインポートフォリオ作成方法

レスポンシブWEBデザイン対応のメニューが作れるチュートリアル17（ソースファイル付き）

無料でオリジナルなクイズが作成できるツール「QuizGenerator」

売上手数料なし！簡単・便利なWixStoresでネットショップを開業する方法