画像を使わず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;
}