<div class="card">
	<h1>Simple Loader</h1>
	<p>A simple warframe style loader</p>
	<div class="loader">
		<div class="spin"></div>
		<div class="bounce"></div>
	</div>
</div>
$master: 16px; /* Everything scales off of this! */
$background: #e3e3e3;
$cardbackground: #fbfbfb;
$cardhoverbackground: #fff;
$color: #111;
$margin: ($master / 2) 0 ($master + ($master / 2)) 0;
$shadow: 0 2px 3px rgba(0,0,0,0.1);
$hovershadow: 0 4px 6px rgba(0,0,0,0.2);

html, body {
	background: $background;
	height: 100%;
	margin: 0;
	overflow-x: hidden;
	width: 100%;
}

body {
	font-family: 'Raleway', sans-serif;
	letter-spacing: 1px;
}

*,
*:after,
*:before {
	box-sizing: border-box;
	-webkit-transition: all 0.3s;
					transition: all 0.3s;
}

.card {
	background: $cardbackground;
	border-radius: 0.15em;
	box-shadow: $shadow;
	float: left;
	font-size: $master;
	left: 50%;
	margin: 0 auto;
	padding: ($master + ($master / 2)) ($master * 2);
	position: relative;
	text-align: center;
	top: 50%;
	-webkit-transform: translateY(-50%) translateX(-50%);
					transform: translateY(-50%) translateX(-50%);
	width: ($master * 20);
	
	&:hover {
		background: $cardhoverbackground;
		box-shadow: $hovershadow;
	}
	
	h1 {
		color: $color;
		font-size: ($master + ($master / 2));
		font-weight: 400;
		margin: $margin;
		text-align: center;
	}
	
	p {
		color: lighten($color, 12%);
		font-weight: 300;
		line-height: ($master + ($master / 2));
		margin: $margin;
		text-align: center;
	}
	
	@keyframes spin {
		0% {
			transform: rotate(0deg);
		}
		10% {
			transform: rotate(0deg);
		}
		20% {
			transform: rotate(90deg);
		}
		35% {
			transform: rotate(90deg);
		}
		45% {
			transform: rotate(180deg);
		}
		60% {
			transform: rotate(180deg);
		}
		75% {
			transform: rotate(270deg);
		}
		85% {
			transform: rotate(270deg);
		}
		100% {
			transform: rotate(360deg);
		}
	}

	@-webkit-keyframes spin {
		0% {
			-webkit-transform: rotate(0deg);
		}
		10% {
			-webkit-transform: rotate(0deg);
		}
		20% {
			-webkit-transform: rotate(90deg);
		}
		35% {
			-webkit-transform: rotate(90deg);
		}
		45% {
			-webkit-transform: rotate(180deg);
		}
		60% {
			-webkit-transform: rotate(180deg);
		}
		75% {
			-webkit-transform: rotate(270deg);
		}
		85% {
			-webkit-transform: rotate(270deg);
		}
		100% {
			-webkit-transform: rotate(360deg);
		}
	}

	@keyframes bounce {
		0% {
			transform: scaleX(1);
		}
		10% {
			transform: scaleX(1);
		}
		20% {
			transform: scaleX(0.8);
		}
		35% {
			transform: scaleX(0.8);
		}
		45% {
			transform: scaleX(1);
		}
		60% {
			transform: scaleX(1);
		}
		75% {
			transform: scaleX(0.8);
		}
		85% {
			transform: scaleX(0.8);
		}
		100% {
			transform: scaleX(1);
		}
	}

	@-webkit-keyframes bounce {
		0% {
			-webkit-transform: scaleX(1);
		}
		10% {
			-webkit-transform: scaleX(1);
		}
		20% {
			-webkit-transform: scaleX(0.8);
		}
		35% {
			-webkit-transform: scaleX(0.8);
		}
		45% {
			-webkit-transform: scaleX(1);
		}
		60% {
			-webkit-transform: scaleX(1);
		}
		75% {
			-webkit-transform: scaleX(0.8);
		}
		85% {
			-webkit-transform: scaleX(0.8);
		}
		100% {
			-webkit-transform: scaleX(1);
		}
	}
	
	.loader {
		box-sizing: content-box;
		height: 40px;
		margin: 0 auto 10px auto;
		position: relative;
		width: 70px;

		&:before {
			border: 2px solid $color;
			box-sizing: content-box;
			content: '';
			height: 0;
			left: 50%;
			position: absolute;
			top: 50%;
			-webkit-transform: translate(-50%,-50%);
			transform: translate(-50%,-50%);
			width: 0;
		}

		.spin {
			-webkit-animation: spin 2.25s linear infinite;
			animation: spin 2.25s linear infinite;
			height: 14px;
			left: 28px;
			position: absolute;
			top: 13px;
			width: 14px;

			&:before {
				border: 3px solid $color;
				box-sizing: content-box;
				content: '';
				height: 14px;
				left: 50%;
				position: absolute;
				top: 50%;
				-webkit-transform: translate(-50%, -50%) rotate(45deg);
				transform: translate(-50%, -50%) rotate(45deg);
				width: 14px;
			}
		}

		.bounce {
			-webkit-animation: bounce 2.25s linear infinite;
			animation: bounce 2.25s linear infinite;
			height: 100%;
			margin: 0 auto;
			position: relative;
			width: 100%;

			&:after,
			&:before {
				box-sizing: content-box;
				content: '';
				height: 10px;
				position: absolute;
				top: 13px;
				-webkit-transform: rotate(45deg);
				transform: rotate(45deg);
				width: 10px;
			}

			&:before {
				border-bottom: 3px solid $color;
				border-left: 3px solid $color;
				left: 0;
			}

			&:after {
				border-right: 3px solid $color;
				border-top: 3px solid $color;
				right: 0;
			}
		}
	}
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.