簡単!ブログやサイトのページ読込にローディングアニメーション【jQueryプラグイン】

large-12

真っ白なページ読み込み画面を
彩るローディングアニメーション!

システムエンジニア(SE)かっきーです。

ページのローディング中にアニメーションが表示させることができれば、読み込み中もユーザーを退屈させません。
また、小洒落たサイトとしてデザイン性もアップしますよね。

そこで今回はjQueryプラグインを使用して、読み込み中にアニメーションを簡単に実装できるようにする方法をご紹介します。

アニメーションの実装方法

ローディングアニメーションのhtmlcssなどをご紹介します。

まずはhtmlの記載方法

	<div id="loader-wrapper">
		<div id="loader"></div>
	</div>

htmlは、ったたこれだけです。
アニメーションはcssjQueryの方で制御してきます。

次にcssの記載方法

まずはコードを記載します。

#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
	background:#f5f0cf;
}
#loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #1bb4d3;
    -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
    animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
 
#loader:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #452c0a;
    -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
      animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
 
#loader:after {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #eb5591;
    -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
      animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}

私たちのブログを見て頂ければおわかりになると思いますが、ページ読み込み時に、3本の線がぐるぐる回るようになっております。

ex:ライティングレシピのローディングアニメーション

レスポンシブWebデザイン_ローディングアニメーション

#loader、#loader:before、#loader:afterの3か所で色や大きさを指定しています。

最後にjQueryの記載方法

最後にjQueryを記載します。

<script>
$(function() {
  var h = $(window).height();
 
  $('#loader,#loader-wrapper').height(h).css('display','block');
});
 
$(window).load(function () {
//読み込み時
  $('#loader').delay(300).fadeOut("slow");
  $('#loader-wrapper').delay(1200).fadeOut("slow");
});
 
//10秒たったらタイムアウトして非表示にさせる
$(function(){
  setTimeout('stopload()',10000);
});
function stopload(){
  $('#loader').delay(300).fadeOut("slow");
  $('#loader-wrapper').delay(1200).fadeOut("slow");
}
</script>

これで終了です。

簡単にできますので皆さんもぜひ試してください!

うまく実装できない場合は、お気軽にお問い合わせフォームよりご連絡くださいませ。

( icon-star 前回の記事も見る

記事の文章作成や、Wordpressサイトのカスタマイズで
お困りではありませんか?
ライティングレシピでは、文章コンサルとWordpressサイトのカスタマイズを承っております!

文章コンサル
●文章力をあげてスキルアップしたい
●SEOを意識した文章を書きたい
●ライター目線で文章が書けるようになりたい

Wordpressサイトのカスタマイズ
●憧れのサイトのようにしてみたい
●不具合を修正したい
●デザインを理想通りに変更したい

少しでも当てはまる項目があるなら、いつでもお気軽にご相談くださいませ。 ココナラ満足度100%で、提案力には自信があります!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です