CSSとjQueryで作るローディング
遊んでたら出来上がったもの。
firefoxでいい動きをしなかったので、userAgentで振り分けました。firefoxだとloadが完了するとloading画面がふわっとフェードし、それ以外のブラウザだと、波が引くようにloading画面が下に下がります。
動きの部分は全てcssアニメーション。firefoxブラウザ限定のフェードのみjsで制御しています。
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <div class="loading"> <div class="loadingWrap"> <div class="loadingImg"> <span class="loadingImgWrap loadingImgWrap1"> <span class="loadingImgWrap loadingImgWrap2"><img src="img/demo/loading2.png" alt=""></span> <img src="img/demo/loading1.png" alt=""> </span> </div> </div> </div> <div class="wrap"> <div class="contents one">1</div> <div class="contents two">2</div> <div class="contents three">3</div> </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 113 114 115 116 117 118 119 120 121 122 123 124 | /*-------------------------------------------*/ /*loading /*-------------------------------------------*/ .loading { position: fixed; width: 100%; height: 100%; bottom: 0; left: 0px; padding-top: 140px; overflow: hidden; z-index: 100000; } .loadingWrap { background: #15559d; width: 100%; height: 100%; overflow: hidden; } .loadingOk { height: 0 !important; bottom: -140px; animation: loadingOk 0.5s ease-in 0s 1 alternate; } @keyframes loadingOk { 0% { height: 100%; bottom: 0; } 100% { height: 0 !important; bottom: -140px; } } .loading:before { position: absolute; top: 0; width: 100%; height: 141px; content: ''; display: inline-block; background: url(img/demo/170731_3.png) repeat-x bottom center; background-size: contain; vertical-align: bottom; } .loadingImg { position: absolute; left: 50%; top: 50%; width: 150px; height: 150px; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .loadingImg .loadingImgWrap { display: block; text-align: center; } .loadingImg .loadingImgWrap1 { position: relative; width: 150px; height: 150px; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .loadingImg .loadingImgWrap1 > img { animation: nowLoading linear 2s -1s infinite normal; } @keyframes nowLoading { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); } } .loadingImg .loadingImgWrap2 { position: absolute; width: 60px; height: 36px; left: 0; right: 0; top: 58px; margin: 0 auto; } /*-------------------------------------------*/ /*other /*-------------------------------------------*/ body{ margin:0; padding:0; } .contents{ width: 100%; height: 500px; line-height: 500px; text-align: center; vertical-align: middle; color: #fff; font-size: 50px; font-weight: bold; } .one{ background: #b2e0f0; } .two{ background:#67bedc; } .three{ background:#2a9cc3; } |
js(jQuery)
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 | jQuery(function() { var wrap =jQuery('.wrap'); var loadingImg = jQuery('.loadimgImg'); var loading = jQuery('.loading'); var userAgent = window.navigator.userAgent.toLowerCase(); jQuery(function() { var h = jQuery(window).height();//ウィンドウの高さ wrap.css('display','none'); loading.height(h).css('display','block'); loadingImg.height(h).css('display','block'); loading.removeClass('loadingOk');//loadingOkというclassを消しておく }); jQuery(window).load(function () {//windowがloadされたら処理開始 if(userAgent.indexOf('firefox') != -1) {//もしfirefoxブラウザのとき loading.delay(900).fadeOut(800); loadingImg.delay(600).fadeOut(300);//firefoxのみふわっとなる wrap.css('display', 'block'); }else{ setTimeout(function(){//それ以外のブラウザのとき1000ミリ秒後に処理開始 loading.addClass('loadingOk');//loadingOkというclassを付ける },1000); wrap.css('display', 'block'); } }); }); |
wordpressで作っていたので、$がjQUeryになっています。
