わずか3行の記述!jQueryプラグインでローディングを自動表示させる「pace」

ページが重い時読み込み中を示すローディングを表示させられるとユーザーのストレスを軽減できます。
jQueryプラグインのpaceを利用すると簡単にプログレスバーなどの表示が可能になります。

sponsors

使用方法

paceからファイルをダウンロード。
themesディレクトリの中にサンプルとしてローディングのデザインが入っていますので、好きなモノを選択します。

<link href="pace-theme-minimal.css" media="all" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script src="pace.min.js"></script>
  
これで完成です。
テーマはCSSですので、自分独自のローディングも簡単に作成できそうです。

サンプル

リロードして下さい。
下記画像はページを重くするだけのものです。
Dog Dog nurse II Dog Looking at and Listening to a Phonograph, "His Master's Voice", The Original RCA Music Puppy Dog Logo Symbol for Advertising My Dog Dog chillin' with red sunglasses

sponsors

Javascriptサンプルページ一覧
skuare.net