.lds-heart {
	display: inline-block;
	position: relative;
	width: 64px;
	height: 64px;
	transform: rotate(45deg);
	transform-origin: 32px 32px;
}

	.lds-heart div {
		top: 23px;
		left: 19px;
		position: absolute;
		width: 26px;
		height: 26px;
		background: #2179f3;
		animation: lds-heart 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
	}

		.lds-heart div:after,
		.lds-heart div:before {
			content: " ";
			position: absolute;
			display: block;
			width: 26px;
			height: 26px;
			background: #2179f3;
		}

		.lds-heart div:before {
			left: -17px;
			border-radius: 50% 0 0 50%;
		}

		.lds-heart div:after {
			top: -17px;
			border-radius: 50% 50% 0 0;
		}

@keyframes lds-heart {
	0% {
		transform: scale(0.95);
	}

	5% {
		transform: scale(1.1);
	}

	39% {
		transform: scale(0.85);
	}

	45% {
		transform: scale(1);
	}

	60% {
		transform: scale(0.95);
	}

	100% {
		transform: scale(0.9);
	}
}

.lds-ripple {
	display: inline-block;
	position: relative;
	width: 32px;
	height: 32px;
}

	.lds-ripple div {
		position: absolute;
		border: 2px solid #2179f3;
		opacity: 1;
		border-radius: 50%;
		animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
	}

		.lds-ripple div:nth-child(2) {
			animation-delay: -0.5s;
		}

@keyframes lds-ripple {
	0% {
		top: 14px;
		left: 14px;
		width: 0;
		height: 0;
		opacity: 1;
	}

	100% {
		top: -1px;
		left: -1px;
		width: 29px;
		height: 29px;
		opacity: 0;
	}
}

.lds-ellipsis {
	display: inline-block;
	position: relative;
	width: 64px;
	height: 64px;
}

	.lds-ellipsis div {
		position: absolute;
		top: 27px;
		width: 11px;
		height: 11px;
		border-radius: 50%;
		background: #fff;
		animation-timing-function: cubic-bezier(0, 1, 1, 0);
	}

		.lds-ellipsis div:nth-child(1) {
			left: 6px;
			animation: lds-ellipsis1 0.6s infinite;
		}

		.lds-ellipsis div:nth-child(2) {
			left: 6px;
			animation: lds-ellipsis2 0.6s infinite;
		}

		.lds-ellipsis div:nth-child(3) {
			left: 26px;
			animation: lds-ellipsis2 0.6s infinite;
		}

		.lds-ellipsis div:nth-child(4) {
			left: 45px;
			animation: lds-ellipsis3 0.6s infinite;
		}

@keyframes lds-ellipsis1 {
	0% {
		transform: scale(0);
	}

	100% {
		transform: scale(1);
	}
}

@keyframes lds-ellipsis3 {
	0% {
		transform: scale(1);
	}

	100% {
		transform: scale(0);
	}
}

@keyframes lds-ellipsis2 {
	0% {
		transform: translate(0, 0);
	}

	100% {
		transform: translate(19px, 0);
	}
}


.lds-default {
	display: inline-block;
	position: relative;
	width: 64px;
	height: 64px;
}

	.lds-default div {
		position: absolute;
		width: 5px;
		height: 5px;
		background: #fff;
		border-radius: 50%;
		animation: lds-default 1.2s linear infinite;
	}

		.lds-default div:nth-child(1) {
			animation-delay: 0s;
			top: 29px;
			left: 53px;
		}

		.lds-default div:nth-child(2) {
			animation-delay: -0.1s;
			top: 18px;
			left: 50px;
		}

		.lds-default div:nth-child(3) {
			animation-delay: -0.2s;
			top: 9px;
			left: 41px;
		}

		.lds-default div:nth-child(4) {
			animation-delay: -0.3s;
			top: 6px;
			left: 29px;
		}

		.lds-default div:nth-child(5) {
			animation-delay: -0.4s;
			top: 9px;
			left: 18px;
		}

		.lds-default div:nth-child(6) {
			animation-delay: -0.5s;
			top: 18px;
			left: 9px;
		}

		.lds-default div:nth-child(7) {
			animation-delay: -0.6s;
			top: 29px;
			left: 6px;
		}

		.lds-default div:nth-child(8) {
			animation-delay: -0.7s;
			top: 41px;
			left: 9px;
		}

		.lds-default div:nth-child(9) {
			animation-delay: -0.8s;
			top: 50px;
			left: 18px;
		}

		.lds-default div:nth-child(10) {
			animation-delay: -0.9s;
			top: 53px;
			left: 29px;
		}

		.lds-default div:nth-child(11) {
			animation-delay: -1s;
			top: 50px;
			left: 41px;
		}

		.lds-default div:nth-child(12) {
			animation-delay: -1.1s;
			top: 41px;
			left: 50px;
		}

@keyframes lds-default {
	0%, 20%, 80%, 100% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.5);
	}
}

.lds-spinner {
	color: official;
	display: inline-block;
	position: relative;
	width: 64px;
	height: 64px;
}

	.lds-spinner div {
		transform-origin: 32px 32px;
		animation: lds-spinner 1.2s linear infinite;
	}

		.lds-spinner div:after {
			content: " ";
			display: block;
			position: absolute;
			top: 3px;
			left: 29px;
			width: 5px;
			height: 14px;
			border-radius: 20%;
			background: #fff;
		}

		.lds-spinner div:nth-child(1) {
			transform: rotate(0deg);
			animation-delay: -1.1s;
		}

		.lds-spinner div:nth-child(2) {
			transform: rotate(30deg);
			animation-delay: -1s;
		}

		.lds-spinner div:nth-child(3) {
			transform: rotate(60deg);
			animation-delay: -0.9s;
		}

		.lds-spinner div:nth-child(4) {
			transform: rotate(90deg);
			animation-delay: -0.8s;
		}

		.lds-spinner div:nth-child(5) {
			transform: rotate(120deg);
			animation-delay: -0.7s;
		}

		.lds-spinner div:nth-child(6) {
			transform: rotate(150deg);
			animation-delay: -0.6s;
		}

		.lds-spinner div:nth-child(7) {
			transform: rotate(180deg);
			animation-delay: -0.5s;
		}

		.lds-spinner div:nth-child(8) {
			transform: rotate(210deg);
			animation-delay: -0.4s;
		}

		.lds-spinner div:nth-child(9) {
			transform: rotate(240deg);
			animation-delay: -0.3s;
		}

		.lds-spinner div:nth-child(10) {
			transform: rotate(270deg);
			animation-delay: -0.2s;
		}

		.lds-spinner div:nth-child(11) {
			transform: rotate(300deg);
			animation-delay: -0.1s;
		}

		.lds-spinner div:nth-child(12) {
			transform: rotate(330deg);
			animation-delay: 0s;
		}

@keyframes lds-spinner {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

/*
	<div class="lds-heart"><div></div></div>
	<div class="lds-ripple"><div></div><div></div></div>
	<div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
	<div class="lds-default"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
	<div class="lds-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
*/