ここ最近もうウェブサイトは、格納メニューから始まりいろんなものアニメーションするのが当たり前なってきてますね。
何でもかんでもやたらに動きゃいいってもんじゃないですが、色んなギミックがあると確かについつい見入ってしまいます。
今回は、そんなサイトの始まりの部分。まぁ昔からあるページローディングってやつです。

もちろんプラグインなんか使わなくてもそんなにハードル高くないんですが、とにかくすぐに!簡単にローディングさせてみたい!って人はプラグインを使ってサクッと追加してみましょう。

ブログなどではそれほど必要ないですが、一般的なサイトにはあるとちょっと気が利いてるかなぁ〜くらいには思います。

1.BH Custom Preloader

bh-custom-preloader

BH Custom Preloaderをダウンロード

デモページ

BH Custom Preloaderは、WordPress用のjQueryカスタムローダー。

ダッシュボード >> プラグイン >> 新規追加 >> BH Custom Preloader を検索

インストールして、有効化。

設定画面でローダーの画像を変更したり、任意の画像をアップロードしてサイトにあったデザインのローダーにします

他にも設定で背景色も変更、ローダーのスピードなんか簡単に変更できちゃいます。

 

2.WordPress Preloader

preloaderWordPress Preloaderをダウンロード

デモページ

ダッシュボード >> プラグイン >> 新規追加 >> Preloader を検索

インストールして、有効化。

設定画面にてローディング中の背景色、ローダーの画像をアップロードします。
また、このプラグインは設定の「Display Preloader」にてローダーを表示させたいページも設定で行えます。

設定が完了したら、

  1. オリジナルテーマのheader.php を開きます。
  2. <body> タグの直後に
&lt;div id="wptime-plugin-preloader"&gt;&lt;/div&gt;

を入れて保存。てな具合です。

 

3.Flat Preloader

banner-772x250

Flat Preloaderをダウンロード

ダッシュボード >> プラグイン >> 新規追加 >> Flat Preloaderer を検索

インストールして、有効化。

スタイルは、フラットなオシャレ Gifアニメーションの他に絵文字アイコンもあります。サイトによっては使い道あるかな。

 

4.ZD Pre Loader

zde

ZD Pre Loaderをダウンロード

ダッシュボード >> プラグイン >> 新規追加 >> ZD Pre Loader を検索

インストールして、有効化。

とにかくにシンプルな作り。とりあえずの方はこれでも十分ですね。色は変更できるようです。

 

5.Ultimate WordPress Preloader

ultimate-wordpress-preloaderUltimate WordPress Preloaderをダウンロード

デモページ

ダッシュボード >> プラグイン >> 新規追加 >> Ultimate WordPress Preloader を検索

インストールして、有効化。

CSS3クロスブラウザのアニメーションプリローダーを追加できます。 今まで紹介したローダーと違って画像じゃないですね。

無料版なので、制限はありますがそれでもまた一味違う感じにはなるかも。無料版なので常に上部に出ているコメントが鬱陶しいですがね。。。

 

6.DWL Preloader

dwl

DWL Preloaderをダウンロード

デモページ

ダッシュボード >> プラグイン >> 新規追加 >> DWL Preloader を検索

インストールして、有効化。

DWL Preloaderは、ローディングするページのすべての写真(CSSの写真を含む)が完全にロードされる前に、Webサイトのプリロード画面を作成できます。

3つの球形のカラフルな円のローダーはまた一味違っていい感じ。

 

7.WP Smart Preloader

wp-18

WP Smart Preloaderをダウンロード

ダッシュボード >> プラグイン >> 新規追加 >> WP Smart Preloader を検索

インストールして、有効化。

WP Smart Preloaderは、CSSと最小限のHTMLで作られているシンプルなCSSプリローダーです。

 

おまけ.SVGローディング

pagepreloadingeffect01

SVGローディングの詳細ページ

デモページ

ここ最近増えているSVGアニメーションでガンガン動いてるサイト。

GIFと違ってジャギらないし、軽量だし。とってもスタイリッシュでナイスなやつ。

そんなSVGのローディングのご紹介もちょっとしときましょう。

GIFアニメーションはちょっと古いよね〜。ダサいよね〜って人は上記のようなサイトのSVGのプリローディングも是非お試しあれ。サイトデザインの幅広めてきましょ。いやほんとに。