div.wrapper
	ul.circle
		li
	ul.dots
		each i in [1, 2, 3]
			li
	ul.square
	ul.bars
		each i in new Array(6)
			li

$icon-color: #2C64FF;
$bg-color: #E8EBF3;

body {
	width: 100%;
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background: $bg-color;
}

.wrapper {
	width: 100px;
	margin: auto;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-flow: column wrap;
	padding: 10px 0;
}

ul {
	margin: 24px 0;
	display: inline-block;
}

// Spinning circle
.circle {
	border-radius: 100%;
	width: 48px;
	height: 48px;
	background: -moz-linear-gradient(top, $bg-color 0%, $icon-color 50%, $bg-color 100%);
	background: -webkit-linear-gradient(top, $bg-color 0%, $icon-color 50%, $bg-color 100%);
	transform-origin: center;
	animation: rotate 3.2s infinite linear;
	display: flex;
	justify-content: center;
	align-items: center;
	outline: 1px solid transparent;
	li {
		width: 38px;
		height: 38px;
		background: $bg-color;
		border-radius: 100%;
	}
}

@keyframes rotate{
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

// Floating dots
.dots li {
	background: $icon-color;
	border-radius: 100%;
	width: 12px;
	height: 12px;
	float: left;
	margin: 0 2px;
	animation: float 1.8s infinite;
	transform-origin: center;
	&:nth-child(2) {
		animation-delay: .2s;
	}
	&:nth-child(3) {
		animation-delay: .4s;
	}
}

@keyframes float {
	0%, 100% {
		transform: translateY(4px);
	}
	50% {
		transform: translateY(-4px);
	}
}

// Rolling square
.square {
	width: 40px;
	height: 40px;
	border: 4px solid $icon-color;
	animation: roll  2s infinite;
	transform-origin: center;
	outline: 1px solid transparent;
}

@keyframes roll {
	0% {
		transform: rotate(0);
	}
	50%, 100% {
		transform: rotate(90deg);
	}
}

// Floating bars
.bars li {
	height: 28px;
	width: 5px;
	background: $icon-color;
	float: left;
	margin: 3px;
	animation: float 1.8s infinite;
	&:nth-child(1) {
		height: 18px;
		margin-top: 7px;
		animation-delay: .1s;
	}
	&:nth-child(2) {
		height: 22px;
		margin-top: 5px;
		animation-delay: .2s;
	}
	&:nth-child(3) {
		animation-delay: .3s;
	}
	&:nth-child(4) {
		animation-delay: .4s;
	}
	&:nth-child(5) {
		height: 22px;
		margin-top: 5px;
		animation-delay: .5s;
	}
	&:nth-child(6) {
		height: 18px;
		margin-top: 7px;
		animation-delay: .6s;
	}
}