jQueryプラグインmaterialPreloader.jsを使って、きれいなプリローダーバー

jQueryプラグインのmaterialPreloader.jsを使うことで、色をきれいに変化させながら移動するプリローダーバー（ローディングバー）を実装できます。オリジナルサンプルでは、画面のトップにプリローダーバーを表示していますが、このページではデザインの都合でヘッダーの下に表示しています。

スクリプトから、バーの位置、バーの高さ、変化する色、フェードイン、フェードアウトの時間をカスタマイズできます。また、下のボタンからプリローダーバーの表示をON、OFFできます。

jQuery(document).ready(function($) {
    preloader = new $.materialPreloader({
        position: 'top',
        height: '6px',
        col_1: '#159756',
        col_2: '#da4733',
        col_3: '#3b78e7',
        col_4: '#fdba2c',
        fadeIn: 200,
        fadeOut: 200
    });
    -----［略］-----
});