目次
jQueryでローディングアニメーションの設定
「jquery」でローディングアニメーションの設定方法をのご紹介!!
「jquery.js」をダウンロード致します。
ダウンロード先
HTMLを記載
下記のソースを追加してください。
|
1 2 3 |
<div id="loadingAnim" class="loadingAnim"> <i class="loadingAnim_line"></i> </div> |
CSSを記載
下記のソースを追加してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 |
/******************** loading effects ********************/ .loadingAnim{ position: fixed; z-index: 100; top: 0; right: 0; bottom: 0; left: 0; display: block; width: 100%; height: 100%; text-align: center; } .loadingAnim:before, .loadingAnim:after{ line-height: 1; position: fixed; z-index: 99; right: 0; left: 0; display: block; width: 100%; height: 50%; margin-right: auto; margin-left: auto; content: ' '; transition: all .3s cubic-bezier(.785, .135, .15, .86) 0s; transition-delay: .3s; background-color: #be8a40; } .loadingAnim:before{ top: 0; } .loadingAnim:after{ bottom: 0; } .loaded .loadingAnim:before{ height: 0; -webkit-transform: translateY(-1%); -ms-transform: translateY(-1%); transform: translateY(-1%); } .loaded .loadingAnim:after{ height: 0; -webkit-transform: translateY(1%); -ms-transform: translateY(1%); transform: translateY(1%); } .loadingAnim_line{ line-height: 1; position: fixed; z-index: 100; top: 0; right: 0; bottom: 0; left: 0; display: inline-block; overflow: hidden; width: 150px; height: 1.25em; margin: auto; transition: all .3s cubic-bezier(.785, .135, .15, .86) 0s; transition-delay: .6s; text-align: center; } .loadingAnim_line:after{ position: absolute; z-index: 100; top: 0; bottom: 0; left: 0; display: block; width: 0; height: 100%; margin: auto auto auto 0; content: ' '; -webkit-animation: loadingAnim 2s ease-in-out .1s infinite normal backwards; animation: loadingAnim 2s ease-in-out .1s infinite normal backwards; background-color: #fff; will-change: transform, width; } .loadingAnim_line:before{ font-family: 'Poppins', sans-serif; font-size: 1.25em; font-weight: bold; font-style: normal; line-height: 1; display: block; content: 'LOADING'; -webkit-animation: loadingAnim_text 1s ease .1s infinite alternate both; animation: loadingAnim_text 1s ease .1s infinite alternate both; letter-spacing: .5em; color: #fff; will-change: opacity; } .loaded .loadingAnim_line{ overflow: hidden; height: 0; } .loaded .loadingAnim_line:after, .loaded .loadingAnim_line:before{ -webkit-animation: none; animation: none; } .loaded .loadingAnim_line:before{ content: 'LOADED!'; } |
Javascriptを記載
下記のソースを追加してください。
※読み込みのcssはサンプルのリンク先を参照してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script> <script type="text/javascript" charset="utf-8"> /** * ローディングアニメーション */ var $delayTime = 1000; $(window).on('load', function(){ var $loadingAnim = $('#loadingAnim'), $body = $('body'); setTimeout( function(){ $body.addClass('loaded'); // アニメ完了後にDOM削除 $loadingAnim.find('.loadingAnim_line').on('transitionend', function( e ){ $(this).parent().remove(); }); }, $delayTime ); }); </script> |
サンプル
下記のソースをお使いください。
表示サンプルを掲載いたします。
詳細内容はこちら(ローディングアニメーションを見る)
参考になるサイト
Loaders.css
Single Element CSS Spinners
SpinKit
CSS Loader
PACE
SVG Loaders
30 CSS Loading Animations for your Website
参考サイト：ツーブロッカ
参考サイト：Web Design Trends
