<div class="container">
	<div class="loader">
		<span></span>
	</div>
</div>
<a href="https://codepen.io/eddykoek/full/abWPayR" target="_blank"><span>Inspired by</span> Cube Loader <span>by</span> Eddy Koek</a>
:root {
	--light-color: #fff;
	--mid-color: #999;
	--dark-color: #111;
	--size: 30; 
	--trans: ease;
}

body {
	height: 100vh;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #ccc;
}

.container {
	width: calc(var(--size) * 1vmin);
	height: calc(var(--size) * 1vmin);
	position: relative;
}

.container:before {
	content: "";
	background: var(--mid-color);
	width: 50%;
	height: 50%;
	position: absolute;
	left: 0%;
	top: 0%;	
	transform-origin: right bottom;
	animation: shadow 4s var(--trans) 0s infinite;
}	

.container:after {
	content: "";
	background: var(--mid-color);
	width: 33.33%;
	height: 33.33%;
	position: absolute;
	left: 50%;
	top: 16.66%;
	transform-origin: left bottom;
	animation: shadow 4s var(--trans) 1s infinite;
	transform: scale(0);
	z-index: -1;
}

.loader {
	width: calc(var(--size) * 0.5vmin);
	height: calc(var(--size) * 0.5vmin);
	background: var(--dark-color);
	transform-origin: right bottom;
	animation: outer 4s var(--trans) 0s infinite;
	position: relative;
}

.loader span {
	width: 50%;
	height: 50%;
	display: block;
	background: var(--light-color);	
	transform-origin: right bottom;
	animation: inner 1s ease-in-out 0.5s infinite;
	top: 50%;
  left: 50%;
  position: absolute;
}

a {
	position: absolute;
	font-size: 1.5vmin;
	text-shadow: 0 0px 0 #000;
	bottom: 5vmin;
	font-family: Arial, Helvetica, serif;
	text-decoration: none;
	background: #111;
	color: #fff;
	padding: 1.25vmin 1.5vmin;
	text-transform: uppercase;
}

a:hover {
	background: #999;
	color: #222;
	text-shadow: -1px 0px 0 #fff8;
}

a span {
	color: #454545;
}

@keyframes outer {
	0% { transform: rotate(0deg) scale(1); }
	12.5% { transform: rotate(90deg) scale(1); }
	25% { transform: rotate(90deg) scale(0.75); }
	37.5% { transform: rotate(180deg) scale(0.75); }
	50% { transform: rotate(180deg) scale(0.5); }
	62.5% { transform: rotate(270deg) scale(0.5); }
	75% { transform: rotate(270deg) scale(0.25); }
	87.5% { transform: rotate(360deg) scale(0.25); }
	100% { transform: rotate(360deg) scale(1); }
}	

@keyframes inner {
	50%, 100% { transform: rotate(360deg) }
}

@keyframes shadow {
	0%, 8.25% { transform: scale(0); }
	16.5% { transform: scale(1); }
	49.5% { transform: scale(0); }
	50% { transform: scale(0) rotate(180deg); }
	50.5%, 58.25% { transform: scale(0) rotate(180deg); }
	66.5% { transform: scale(0.5) rotate(180deg); }
	100% { transform: scale(0) rotate(180deg); }
}
// Inpired by this pen by Eddy Koek:
// https://codepen.io/eddykoek/full/abWPayR

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.