Простой прелоадер для сайта SASS HTML CSS JQUERY

HTML

<div class="load_area">
		<div class="load">
			<hr/><hr/><hr/><hr/>
		</div>
</div>

JQuery

$(window).load(function(){
	$(".load_area").fadeOut("slow");
})

SASS

.load_area
	position: absolute
	z-index: 999
	top: 0
	left: 0
	right: 0
	bottom: 0
	background-color: #181818
	.load 
		position: absolute
		top: 50%
		left: 50%
		transform: translate(-50%,-50%)
		width: 70px
		height: 70px
		hr 
			border: 0
			margin: 0
			width: 40%
			height: 40%
			position: absolute
			border-radius: 50%
			animation: spin 2s infinite
			&:nth-child(1)
				background-color: #19a68c
				animation-delay: -1.5s
			&:nth-child(2)
				background-color: #f63d3a
				animation-delay: -1.0s
			&:nth-child(3)
				background-color: #fda543
				animation-delay: -0.5s
			&:nth-child(4)
				background-color: #193b48
@keyframes spin
	0%,100%
		transform: translate(0)

	25%
		transform: translate(130%)

	50%
		transform: translate(130%, 130%)

	75%
		transform: translate(0, 130%)

ссылка источника https://codepen.io/zerospree/pen/aCjAz