ページを読み込む際に、ローディング中であることを示すエフェクトを表示させているウェブサイトは数多くあります。
これまでは主に Flash を使う方法が主流でしたが、既に Flash は廃れた技術。
そこで、同様のことを jQuery で実現したのが［jQuery IntroTzikas］です。

IntroTzikas：サンプル

ファイルサイズも小さく、導入方法も簡単なので初心者の方にもお勧めできる jQuery プラグインです。

jQueryプラグイン［IntroTzikas］の実装方法

まずは公式の配布サイトよりプラグインの本体をダウンロードしてきましょう。

→IntroTzikas

単体では動かないので、jQuery の本体ファイルもダウンロードしてくる必要があります。

→jQuery

続いて HTML の <head>〜</head>内で、ダウンロードしてきた［introtzikas.js］プラグインとjQuery本体［jquery.js］を読み込みます。

<head>
<script src="../js/jquery.js"<>/script>
<script src="../js/introtzikas.js"<>/script>
</head>

最後に［IntroTzikas］の設定です。

<script type="text/javascript">
$(document).ready(function(){
$().introtzikas({
line: '#fff', //ラインの色
speedwidth: 3000, //幅の移動完了スピード
speedheight: 2000, //高さの移動完了スピード
bg: '#333' //背景色
}); 
});
</script>

実装するサイトのデザインに合わせて、ラインの色と背景色、挙動のスピードを調整すれば完了です。

補足ですが、Safari と Chrome にて、［IntroTzikas］の挙動が開始する前に、一瞬だけベースのデザインが描画されてしまう不具合（？）がありますが、スタイルシートで body 要素に対して下記のように設定することで回避できます。

<body style="visibility:hidden; background-color:white; background-image:none">

サンプルは以下よりどうぞ。

IntroTzikas：サンプル

関連本

jQueryについて、最新のテクニックを学ぶなら以下の書籍がオススメです。

jQuery最高の教科書