<!-- Floating Loader -->

<div class="loader"></div>
<div class="shadow"></div>

<!-- Like what you see? why not visit my website for more awesome work -->

<div class="logo">
	<a href="https://mariodesigns.co.uk/" target="_blank"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/751678/MDlogo.svg" alt="Mario Designs"></a>
</div>
// Color variables
$main : #FFF5A5;
$secundary : #FFD4DA;
$terchiary : #99D2E4;

// animation keyframes
@keyframes mainAnimation {
	0% {
		width: 50px;
		transform: translateX(0px) translateY(0px) rotate(0deg);
	}
	20% {
		width: 50px;
		transform: translateX(0px) translateY(0px) rotate(0deg);
	}
	40% {
		width: 150px;
		transform: translateX(-50px) translateY(0px) rotate(0deg);
	}
	60% {
		width: 150px;
		transform-origin: bottom right;
		transform: translateX(-150px) translateY(0px) rotate(90deg);
	}
	80% {
		width: 50px;
		transform: translateX(-25px) translateY(0px) rotate(90deg);
	}
	100% {
		width: 50px;
		transform: translateX(-50px) translateY(0px) rotate(90deg);
	}
}
@keyframes secundaryAnimation {
	0% {
		transform: translateX(0px) translateY(0px) rotate(0deg);
	}
	20% {
		transform: translateX(0px) translateY(0px) rotate(180deg);
	}
	40% {
		transform: translateX(0px) translateY(0px) rotate(180deg);
	}
	60% {
		transform: translateX(0px) translateY(0px) rotate(0deg);
	}
	80% {
		transform: translateX(0px) translateY(0px) rotate(0deg);
	}
	100% {
		transform: translateX(0px) translateY(0px) rotate(180deg);
	}
}
@keyframes shadowAnimation {
	0% {
		width: 150px;
		transform: translateX(-25px) translateY(0px) rotate(0deg);
	}
	20% {
		width: 75px;
		transform: translateX(37.5px) translateY(0px) rotate(0deg);
	}
	40% {
		width: 200px;
		transform: translateX(-25px) translateY(0px) rotate(0deg);
	}
	60% {
		width: 75px;
		transform: translateX(37.5px) translateY(0px) rotate(0deg);
	}
	80% {
		width: 75px;
		transform: translateX(37.5px) translateY(0px) rotate(0deg);
	}
	100% {
		width: 150px;
		transform: translateX(-25px) translateY(0px) rotate(0deg);
	}
}
@keyframes float {
	0% {
		top: 50%;
	}
	50% {
		top: 51%;
	}
	100% {
		top: 50%;
	}
}

// Styling
html, body {
	height: 100%;
}
body {
	position: relative;
	background: rgb(153,210,228);
	background: linear-gradient(135deg, rgb(153,210,228) 0%,rgb(255,212,218) 100%);
}

.loader {
	position: absolute;
	width: 50px;
	height: 50px;
	top: 50%;
	left: 50%;
	margin-top: -25px;
	margin-left: -25px;
	background-color: $main;
	transform: translateX(0px) translateY(0px) rotate(0deg);
	animation: mainAnimation 2.6s ease 0s infinite forwards;
	z-index: 2;
	&:after {
		content: '';
		display: inline-block;
		position: absolute;
		width: 50px;
		height: 50px;
		top: 0;
		left: -50px;
		background-color: $main;
		transform-origin: top right;
		transform: translateX(0px) translateY(0px) rotate(0deg);
		animation: secundaryAnimation 2.6s ease 0s infinite forwards;
	}
}

.shadow {
	position: absolute;
	width: 100px;
	height: 10px;
	top: 50%;
	left: 50%;
	margin-top: 50px;
	margin-left: -75px;
	border-radius: 50%;
	background-color: #95a5a6;
	transform: translateX(0px) translateY(0px) rotate(0deg);
	animation: shadowAnimation 2.6s ease 0s infinite forwards,
						 float 5s ease-in-out 0s infinite forwards;
	z-index: 1;
}

// MD Logo - !click to see more awesome work!
.logo {
	position: absolute;
	bottom: 20px;
	left: 50%;
	width: 42px;
	height: 42px;
	padding: 12px 5px;
	margin-left: -21px;
	box-sizing: border-box;
	background-color: white;
	border-radius: 50%;
	transition: transform 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
	&:hover {
		transform: scale(1.4);
	}
	img {
		width: 100%;
		height: auto;
		margin: 0 auto;
	}
}
// No JS Here...
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.