個人的に役立ったデザイン素材やTips、WEBサービス、役立つグッズ、あれやこれやをご紹介

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

すでに当サイトにも導入してみたのですが、お気づきでしょうか。
PC版で当サイトをご覧いただくと、画面右上にパーセンテージが表示されます。
プログレスバーです。
ページの読み込みが完了して、100%になると消えていきます。
このプログレスバーは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をまずは読み込んでください。

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を読み込みます。

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

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

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

お役に立てましたら、以下どれでも結構のですので、ポチリと……。

  • 0
  • 0
  • 67
  • 87

Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

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

iPhoneもMacも簡単OK!CSSだけであなただけのAppleデバイスを描ける無料ジェネレーター「Pure CSS Apple Device Generator」

iPhoneもMacも簡単OK!CSSだけであなただけのAppleデバイスを描ける無料ジェネレーター「Pure CSS Apple Device Generator」

CSSだけでAppleデバイスを描ける無料ジェネレーター「Pure CSS Apple Device

記事を読む

これは簡単!ポリゴン画像生成ジェネレーター「Trianglify Generator」

これは簡単!ポリゴン画像生成ジェネレーター「Trianglify Generator」

簡単・無料で利用できるこポリゴン画像生成ジェネレーターをご紹介。 背景画像などによく使われているポ

記事を読む

jQueryベストプラグイン2014 使えるプラグイン50選をご紹介

jQueryベストプラグイン2014 使えるプラグイン50選をご紹介

2014年に登場したベストなjQueryプラグインを50個ご紹介します。 レイアウト系のプラグイン

記事を読む

全部無料!レスポンシブWEBデザイン制作を驀進させるレスポンシブ対応テンプレート121

2013年も気がつけば、もうあとすこしとなりました。 そんななか、無料で利用できるフリーのレスポン

記事を読む

オリジナルなアイコンフォントの作り方・使い方

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

アイコンフォントは便利だ、という声をあちこちで耳します。 遅ればせながら私も使ってみましたが、本当

記事を読む

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

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

クリックするたび何かに役立つサイトを紹介してくれるサイトをご紹介。 このサイト、まったく自分の興味

記事を読む

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

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

イメージスライダーは限られたスペースに多くの視覚的情報を盛り込めるので、ショップなどでは非常によく利

記事を読む

CSS3を知らなくてもOK!便利すぎるCSS3関連ツール&ジェネレーター51

CSSを入力するときには、細かいプロパティを覚えていないと、作業がなかなかはかどりません。 特に、

記事を読む

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

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

ナビゲーションメニューのプラグインやデモ、チュートリアルが90以上コレクションされたサイトをご紹介し

記事を読む

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

WEBフォントがどんどん使われるようになるにつれ、関連するツールもたくさん出来てきています。 多い

記事を読む