個人的に役立ったデザイン素材や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アソシエイト・プログラムの参加者です。

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

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

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

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

記事を読む

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

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

記事を読む

CSSで表現されたスゴワザのテキストエフェクト&チュートリアル19

CSS3では、CSSでさまざまなテキストエフェクトを実現することが可能です。 今回は、CSSで表現

記事を読む

SVGのシームレスパータンを生成できる無料のフリージェネレーター「PatternBolt」

SVGのシームレスパータンを生成できる無料のフリージェネレーター「PatternBolt」

簡単にWEBサイトの背景画像が作れてしまう無料ジェネレーターのご紹介です。 つくれるのは、SVG形

記事を読む

無料のスクロール/パララックススクロール系jQueryプラグイン24

スクロール/パララックススクロールはコンテツをリッチにしてくれる魅力的な演出です。 今回はそんな魅

記事を読む

これは便利!背景画像に使えるシームレスパターンを無料でコピー/ダウンロードできる「Transparent Textures」

こりゃ便利!というサービスがあったのでご紹介します。 WEBサイトを制作するときに背景画像などに利

記事を読む

背景画像をフルスクリーン&レスポンシブ対応にする方法

背景画像をスクリーンいっぱいに表示しているサイトが増えているとはいえ、いま見てもインパクトがあります

記事を読む

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

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

ズボラな自分に最適なCSSグラデーション作成ツールがあったので、ご紹介します。 グラデーションを自

記事を読む

これが無料!ハイクオリティーなPhotoshop用WEBデザインテプンレート(psd)60+

海外のデザイナーがPhotoshopで作成したWEBデザイン用のテンプレート(psdファイル)をまと

記事を読む

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

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

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

記事を読む