.spinner {
	-webkit-animation: spinner .8s linear infinite;
	-moz-animation: spinner .8s linear infinite;
	-o-animation: spinner .8s linear infinite;
	animation: spinner .8s linear infinite;
}

@keyframes spinner { 
	0% {
		-webkit-transform: rotate(0);
		-moz-transform: rotate(0);
		-o-transform: rotate(0);
		transform: rotate(0);
	}100% {
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

.spinner-1 {
	display: inline-block;
	width: 50px;
	height: 50px;
	background: #fff;
	border-radius: 50%;
	animation: spinner-1 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

@keyframes spinner-1 {
	0%, 100% {
		animation-timing-function: cubic-bezier(0.49, 0.12, 0.89, 0.5);
	}
	0% {
		transform: rotateY(0deg);
	}
	50% {
		transform: rotateY(1800deg);
		animation-timing-function: cubic-bezier(0.08, 0.51, 0.57, 0.93);
	}
	100% {
		transform: rotateY(3600deg);
	}
}

.spinner-2 {
	display: inline-block;
	position: relative;
	width: 64px;
	height: 64px;

	>div {
		position: absolute;
		width: 5px;
		height: 5px;
		background: #fff;
		border-radius: 50%;
		animation: spinner-2 1.2s linear infinite;

		&:nth-child(1) {
			animation-delay: 0s;
			top: 29px;
			left: 53px;
		}
		&:nth-child(2) {
			animation-delay: -0.1s;
			top: 18px;
			left: 50px;
		}
		&:nth-child(3) {
			animation-delay: -0.2s;
			top: 9px;
			left: 41px;
		}
		&:nth-child(4) {
			animation-delay: -0.3s;
			top: 6px;
			left: 29px;
		}
		&:nth-child(5) {
			animation-delay: -0.4s;
			top: 9px;
			left: 18px;
		}
		&:nth-child(6) {
			animation-delay: -0.5s;
			top: 18px;
			left: 9px;
		}
		&:nth-child(7) {
			animation-delay: -0.6s;
			top: 29px;
			left: 6px;
		}
		&:nth-child(8) {
			animation-delay: -0.7s;
			top: 41px;
			left: 9px;
		}
		&:nth-child(9) {
			animation-delay: -0.8s;
			top: 50px;
			left: 18px;
		}
		&:nth-child(10) {
			animation-delay: -0.9s;
			top: 53px;
			left: 29px;
		}
		&:nth-child(11) {
			animation-delay: -1s;
			top: 50px;
			left: 41px;
		}
		&:nth-child(12) {
			animation-delay: -1.1s;
			top: 41px;
			left: 50px;
		}
	}
}

@keyframes spinner-2 {
	0%, 20%, 80%, 100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.5);
	}
}

.spinner-3 {
	display: inline-block;
	position: relative;
	width: 64px;
	height: 64px;
	>div {
		position: absolute;
		width: 13px;
		height: 13px;
		border-radius: 50%;
		background: #fff;
		animation: spinner-3 1.4s linear infinite;

		&:nth-child(1) {
			top: 6px;
			left: 6px;
			animation-delay: 0s;
		}
		&:nth-child(2) {
			top: 6px;
			left: 26px;
			animation-delay: -0.4s;
		}
		&:nth-child(3) {
			top: 6px;
			left: 45px;
			animation-delay: -0.8s;
		}
		&:nth-child(4) {
			top: 26px;
			left: 6px;
			animation-delay: -0.4s;
		}
		&:nth-child(5) {
			top: 26px;
			left: 26px;
			animation-delay: -0.8s;
		}
		&:nth-child(6) {
			top: 26px;
			left: 45px;
			animation-delay: -1.2s;
		}
		&:nth-child(7) {
			top: 45px;
			left: 6px;
			animation-delay: -0.8s;
		}
		&:nth-child(8) {
			top: 45px;
			left: 26px;
			animation-delay: -1.2s;
		}
		&:nth-child(9) {
			top: 45px;
			left: 45px;
			animation-delay: -1.6s;
		}
	}
}

@keyframes spinner-3 {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.45;
	}
}

.spinner-4 {
	
	> div {
		width: 12px;
		height: 12px;
		display: inline-block;
		background-color: #fff;
		animation: spinner-4 1.3s infinite ease-in-out both;
		border-radius: 50%;

		&:nth-child(1) {
			animation-delay: -0.32s;
		}

		&:nth-child(2) {
			animation-delay: -0.16s;
		}

		&:nth-child(3) {
			
		}
	}
}

@keyframes spinner-4 {
	0%, 80%, 100% { 
		-webkit-transform: scale(0);
		transform: scale(0);
	} 40% { 
		-webkit-transform: scale(1.0);
		transform: scale(1.0);
	}
}

.spinner-5 {
	position: relative;
	display: inline-block;
	width: 24px;
	height: 24px;

	&:before {
		content: '';
		box-sizing: border-box;
		position: absolute;
		top: 50%;
		left: 50%;
		width: 24px;
		height: 24px;
		margin: -12px 0 0 -12px;
		border-radius: 50%;
		border-top: 2px solid #fff;
		border-right: 2px solid transparent;
		animation: spinner-5 .6s linear infinite;
	}
}

.spinner-5.primary {
	&::before {
		border-top: 2px solid $color-primary;
	}
}

.spinner-5.secondary {
	&::before {
		border-top: 2px solid $color-secondary;
	}
}

.spinner-5.success {
	&::before {
		border-top: 2px solid $color-success;
	}
}

.spinner-5.warning {
	&::before {
		border-top: 2px solid $color-warning;
	}
}

.spinner-5.danger {
	&::before {
		border-top: 2px solid $color-danger;
	}
}

.spinner-5.info {
	&::before {
		border-top: 2px solid $color-info;
	}
}

.spinner-5.dark {
	&::before {
		border-top: 2px solid $color-dark;
	}
}


@keyframes spinner-5 {
	to {transform: rotate(360deg);}
}