ロードアニメーション【SpinKit】

最近スケートボードに興味を持ち始めたおんたです。

小さい頃公園で軽く滑った程度なのでおそらく前に一直線でしか進めないです。

とりあえず買ってみようかなと思うもどこでするんですかね？

専用の場所はやんちゃなお兄さんたちが技を披露してて初心者には近づき難いイメージです。

ちまちまと自分のサイト制作をしてたんですが、なかなか素材を作ろうとしてないので進みません。やはり締め切りだとかスケジュール作らないとダメですね。

（ポケモンlet's go楽しい......）

テストで無料サーバーを使ってるのですが、無料なだけにめちゃくちゃ遅いです。

（遅すぎてタイムアウトになるぐらい）

なのでロード画面とか設置してます。

ロードアニメーションってついつい眺めちゃいますよね。待ち受けに欲しいです。

今回は使ったやつメモってことで残しておきたいと思います。

SpinKit

tobiasahlin.com

ロードアニメーションは色々ありますが、個人的にシンプル目が好きなのでSpinKitを使用しました。

複数ある動きの中から好きなスライドで上部の「source」を選択するとコードが出てきます。

それをサイト右上にあるGitHubの共通コードと一緒に使用したいページに貼り付けていきます。

【HTML】

使っていたヘッダーに干渉したのか直接書いたら解決したのでjavascriptもhtmlに直接書いてました。

ちなみにロード以外は「id="wrap"」で囲んでおいてください。

（ロード中に表示されたりするので）

<script>
    // loading
$(function() {
  var h = $(window).height();
  $('#wrap').css('display','none');
  $('#loader').height(h).css('display','block');
});
  
$(window).on("load", function() { //読み込み完了で実行
  $('#loader').delay(600).fadeOut(800);
  $('#wrap').css('display', 'block');
});
  
//10秒経過でロード画面強制非表示
$(function(){
  setTimeout('stopload()',10000);
});
function stopload(){
  $('#wrap').css('display','block');
  $('#loader').delay(600).fadeOut(500);
}
</script>
<!-- ここにhtmlコピペ -->
<div id="loader">
    <div class="spinner">
  <div class="dot1"></div>
  <div class="dot2"></div>
</div>
</div>
<!-- /コピペここまで -->

「$('#wrap').css('display', 'block');」でwrapで囲んだコンテンツをロード中非表示にしてます。
もし強制非表示したくない場合は「//10秒経過で〜」コメントアウトから８行削除してください。
「ここにhtmlコピペ」〜「コピペここまで」に「source」をクリックして表示されたhtml部分だけをコピペします。

【CSS】

以下css側です。

wrapはコンテンツなので表記してません。javascriptでロード中#wrapを非表示させているのでcssに追加はいりません。

body {
    background: #5F5246;
}
/* loarding */
#loader {
    width: 100%;
    height: 100%;
    position: relative;
}
/* 以降コピーした各種css*/
bodyと#loader以降に「source」をクリックして出てきたcss部分をコピペします。

まだアニメーション苦手なのでいつか一から作ってみたり、いろんなロードアニメーション楽しみたいですね。

Mofu

飛べないエビは美味しいエビフライ。

ロードアニメーション【SpinKit】

SpinKit

【HTML】

【CSS】