.container
	h1 Fancy CSS Loaders
	p Single element pure CSS spinners & loaders
	.loader-list
		.loader-item
			.loader.loader-1
		.loader-item
			.loader.loader-2
		.loader-item
			.loader.loader-3

		.loader-item
			.loader.loader-4
		.loader-item
			.loader.loader-5
		.loader-item
			.loader.loader-6

		.loader-item
			.loader.loader-7
		.loader-item
			.loader.loader-8
		.loader-item
			.loader.loader-9

@import url('https://fonts.googleapis.com/css?family=Delius+Unicase')

*, *::before, *::after
	box-sizing: border-box

html, body
	width: 100%
	height: 100%
	display: flex
	background: #00ACC1
	color: #80DEEA
	font-family: 'Delius Unicase', cursive

h1, p
	width: 100%
	text-align: center

h1
	margin: 0 0 10px

p
	font-size: 10px
	margin: 0 0 50px

.container
	margin: auto

.loader
	width: 30px
	height: 30px
	position: relative
	margin: auto

	&::before, &::after
		content: ''
		position: absolute

	&-list
		display: grid
		grid-template: repeat(3, 120px) / repeat(3, 120px)
		grid-gap: 30px
	
	&-item
		display: flex
		background: rgba(0, 0, 0, 0.05)
		
.loader-1
	&::before, &::after
		border-radius: 50%
		width: 100%
		height: 100%
		top: calc(50% - 15px)
		left: calc(50% - 15px)
		animation:
			duration: 3s
			timing-function: linear
			iteration-count: infinite
	&::before
		border:
			style: solid
			width: 3px 3px 3px 0
			color: #fff transparent transparent
		transform: scale(0.3) rotate(0deg)
		opacity: 0.5
		animation-name: foregroundCircle
	&::after
		background: #fff
		opacity: 0.5
		transform: scale(0)
		animation-name: backgroundCircle

@keyframes foregroundCircle
	0%
		transform: scale(0.3) rotate(0deg)
	12.5%
		transform: scale(0.3) rotate(180deg)
	25%, 50%
		opacity: 1
	50%
		transform: scale(1) rotate(720deg)
	100%
		transform: scale(0.3) rotate(1800deg)
		opacity: 0.5

@keyframes backgroundCircle
	12.5%
		transform: scale(0.3)
	90%, 100%
		transform: scale(2)
		opacity: 0

.loader-2
	perspective: 500px
	transform-style: preserve-3d
	transform: rotate3d(2, 1, -1, 90deg)
	&::before, &::after
		border-radius: 50%
		width: 16px
		height: 16px
		top: calc(50% - 8px)
		background: #fff
		animation:
			duration: 3s
			timing-function: linear
			iteration-count: infinite
	&::before
		left: 0
		opacity: 0.7
		border-top-right-radius: 0
		transform-origin: right top
		animation-name: flapL
	&::after
		left: 50%
		opacity: 0.5
		border-top-left-radius: 0
		transform-origin: left top
		animation-name: flapR

@keyframes flapL
	25%, 50%
		transform: rotateY(-45deg)
	12.5%, 37.5%, 65%
		transform: rotateY(45deg)
	0%, 100%
		transform: rotateY(-30deg)

@keyframes flapR
	25%, 50%
		transform: rotateY(45deg)
	12.5%, 37.5%, 65%
		transform: rotateY(-45deg)
	0%, 100%
		transform: rotateY(30deg)

.loader-3
	&::before, &::after
		border-radius: 50%
		animation:
			duration: 1s
			timing-function: ease-in-out
			iteration-count: infinite
	&::before
		width: 16px
		height: 16px
		top: calc(50% - 8px) 
		left: calc(50% - 8px)
		border-bottom-right-radius: 0
		box-shadow: 0 0 0 2px #fff
		background: radial-gradient(transparent 0, transparent 3px, #fff 3px)
		transform: rotate(45deg)
		animation-name: mapPin
	&::after
		width: 4px
		height: 2px
		opacity: 0.8
		top: 100%
		left: calc(50% - 2px)
		background: #fff
		animation-name: mapPinShadow
	
@keyframes mapPin
	50%
		transform: rotate(45deg) translate(-50%, -50%)

@keyframes mapPinShadow
	50%
		transform: scaleX(3)
		opacity: 0.2
		
.loader-4
	&::before, &::after
		border-radius: 50%
		width: 8px
		height: 8px
		background: #fff
		top: calc(50% - 4px)
		animation:
			duration: 1s
			timing-function: linear
			iteration-count: infinite
	&::before
		left: 0
		animation-name: firstDot
	&::after
		right: 0
		opacity: 0.8
		animation-name: secondDot
	
@keyframes firstDot
	0%, 50%
		transform-origin: 15px center
	50%
		transform: rotateZ(180deg)
	51%, 100%
		transform-origin: center
	51%
		transform: rotateZ(180deg) translateX(-22px)
	100%
		transform: rotateZ(180deg) translateX(0)

@keyframes secondDot
	0%, 50%
		transform: rotateZ(-180deg)
	51%, 100%
		transform-origin: -8px center

.loader-5
	&::before, &::after
		border-radius: 50%
		background: #fff
		width: 16px
		height: 16px
		top: calc(50% - 8px)
		left: calc(50% - 8px)
		animation:
			duration: 2s
			timing-function: ease-in-out
			iteration-count: infinite
	&::before
		opacity: 0.7
		animation-name: upperDot
	&::after
		opacity: 0.5
		animation-name: lowerDot
	
@keyframes upperDot
	25%
		transform: translateY(-50%)
	47.5%, 52.5%
		transform: translateY(0)
	75%
		transform: translateY(50%)

@keyframes lowerDot
	25%
		transform: translateY(50%)
	47.5%, 52.5%
		transform: translateY(0)
	75%
		transform: translateY(-50%)

.loader-6
	border-radius: 50%
	width: 4px
	height: 4px
	background: #fff
	animation-name: pacmanDot
	transform: translateX(14px)
	&::before, &::after
		border-radius: 50%
		border: 14px solid #fff
		border-right-color: transparent
		top: -12px
		left: -24px
	&, &::before, &::after
		animation:
			duration: .5s
			timing-function: linear
			iteration-count: infinite
	&::before
		animation-name: upperJaw
	&::after
		animation-name: lowerJaw
	
@keyframes pacmanDot
	0%, 50%
		background: #fff
	51%, 100%
		background: none
	0%, 100%
		transform: translateX(19px)
	50%
		transform: translateX(14px)

@keyframes upperJaw
	50%
		transform: rotate(50deg) translate(2px, -2px)

@keyframes lowerJaw
	50%
		transform: rotate(-50deg) translate(2px, 2px)

.loader-7
	border: 1px solid #fff
	height: 14px
	width: 32px
	&::before
		width: 4px
		height: 10px
		background: #fff
		left: 1px
		top: calc(50% - 5px)
		animation: blockBar 2s infinite
	
@keyframes blockBar
	0%, 80%
		opacity: 1
	0%, 20%
		box-shadow: 8px 0 0 0 rgba(255, 255, 255, 0), 16px 0 0 0 rgba(255, 255, 255, 0), 24px 0 0 0 rgba(255, 255, 255, 0)
	21%, 40%
		box-shadow: 8px 0 0 0 rgba(255, 255, 255, 1), 16px 0 0 0 rgba(255, 255, 255, 0), 24px 0 0 0 rgba(255, 255, 255, 0)
	41%, 60%
		box-shadow: 8px 0 0 0 rgba(255, 255, 255, 1), 16px 0 0 0 rgba(255, 255, 255, 1), 24px 0 0 0 rgba(255, 255, 255, 0)
	61%, 80%
		box-shadow: 8px 0 0 0 rgba(255, 255, 255, 1), 16px 0 0 0 rgba(255, 255, 255, 1), 24px 0 0 0 rgba(255, 255, 255, 1)
	81%, 100%
		opacity: 0

.loader-8
	&::before, &::after
		border-radius: 50%
		width: 10px
		height: 10px
		top: calc(50% - 5px)
		left: calc(50% - 5px)
		animation:
			duration: 3s
			timing-function: linear
			iteration-count: infinite
	&::before
		background: #fff
		animation-name: droplets
	&::after
		border: 1px solid #fff
		opacity: 0
		animation-name: ripples
	
@keyframes droplets
	0%, 15%
		opacity: 1
	15%
		transform: scale(.5)
	60%
		transform: scale(4)
	60%, 90%
		opacity: 0
	90%
		transform: scale(3)
	95%, 100%
		opacity: 1
	100%
		transform: scale(1)

@keyframes ripples
	0%, 30%
		opacity: 0
		transform: scale(1)
	60%
		opacity: .3
	90%
		transform: scale(3)
	100%
		opacity: 0
		
		
.loader-9
	border: 1px solid rgba(255, 255, 255, 0.3)
	border-radius: 50%
	animation: counterClockwise 4s linear infinite
	&::before, &::after
		border-radius: 50%
	&::before
		width: 8px
		height: 8px
		background: #fff
		animation: clockwise 4s linear infinite
	&::after
		width: 4px
		height: 4px
		top: 8px
		left: 8px
		background: #fff
		transform-origin: -4px -4px
		animation: counterClockwise 1s linear infinite
	
@keyframes clockwise
	to
		transform: rotate(1turn)
	
@keyframes counterClockwise
	to
		transform: rotate(-1turn)