<div class="container">
	<div class="loader">
		<div class="spinnerBlock">
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
		</div>
	</div>
</div>
* {
	margin: 0;
	padding: 0;
}
*,*:after, *:before {
	box-sizing: border-box;
}
html, body {
	height: 100%;
}
.container {
	background-color: #f39c12;
	height: 100%;
	position: relative;
}
.loader {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	.spinnerBlock {
		animation: rotate 600ms linear 600ms infinite;
		transform-origin: center;
		display: block;
		height: 50px;
		width: 50px;
	}
	span {
		display: block;
		border: 2px solid #fff;
		border-radius: 50%;
		height: 100%;
		width: 100%;
		
		position: absolute;
		left: 0;
		top: 0;
		//transition: all 400ms linear 500ms;
		&:nth-child(1) {
			border-color: #eee;
		}
		&:nth-child(2) {
			left: -18px;
			top: 10px;
		}
		&:nth-child(3) {
			left: -18px;
			top: -10px;
		}
		&:nth-child(4) {
			left: 0;
			top: -18px;
		}
		&:nth-child(5) {
			left: 18px;
			top: -10px;
		}
		&:nth-child(6) {
			left: 18px;
			top: 10px;
		}
		&:nth-child(7) {
			left: 0;
			top: 18px;
		}
	}
}
@keyframes rotate {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.