jQuery

【jQuery】jQueryとCSSを使用した軽量プリローダープラグインPreloadinator

February 15, 2018
preloadinator

PreloadinatorはjQueryとCSSを使用した軽量プリローダープラグイン。

HTML

<body>
	<main>
		<section>
		</section>
	</main>
	<div class="preloader js-preloader"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="dist/js/preloadinator.min.js"></script>
<script>
$('.js-preloader').preloadinator();
</script>
</body>

CSS

body {
	margin: 0;
	text-align: center;
	background: #0AC2D2;
}

section {
	min-height: 100vh;
}

.flex-center {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.preloader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #60D7A9;
}

Demoを見て頂いたらわかる通り、preloaderの時は背景が#60D7A9になり、プリローダーが終わると背景が#0AC2D2;に変化します。
MIT