
画像を使わずjQueryとCSS3だけでループアニメーションのローディング画面を用意する
2015年4月8日jQueryのみでつくるギミック
ページ全体を読み込むまでページを待機させるローディング画面を用意します。待機中にサークルがループで回転するアニメーションはCSS3だけでつくっています。
JavaScript
(function($){ $(function() { $('head').append('<style type="text/css">#container { display: none; } #fade, #loader { display: block; }</style>'); $('body').append('<div id="fade"></div><div id="loader"></div>'); $(window).ready(function() { setTimeout( function() { $('#fade').delay(500).fadeOut(1000); $('#loader').fadeOut(500); $('#container').delay(500).css('display', 'block'); }, 500 ); }); }); })(jQuery);
CSS
#fade { display: none; width: 100%; height: 100%; position: absolute; background: #ffffff; top: 0px; left: 0px; z-index: 10000; } #loader { display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index: 10001; width: 30px; height: 30px; border-radius: 50%; border: 8px solid #ff5b6b; border-right-color: transparent; animation: loopSpin 1s linear infinite; -webkit-animation: loopSpin 1s linear infinite; -moz-animation: loopSpin 1s linear infinite; } @keyframes loopSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @-webkit-keyframes loopSpin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @-moz-keyframes loopSpin { 0% { -moz-transform: rotate(0deg); } 100% { -moz-transform: rotate(360deg); } } #container { text-align: center; } #container img { width: 100%; height: auto; }