[data-loader] {
	position: absolute;
	z-index: 0;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}

// Circles loader
[data-loader='circles'] {
	width: 40px;
	height: 40px;
	animation-play-state: paused;

	> span {
		position: absolute;
		opacity: 0;
		width: 100%;
		height: 100%;
		background: #c5cbd0;
		border-radius: 100%;
		animation-play-state: inherit;
		animation-name: circles;
		animation-duration: 1.5s;
		animation-timing-function: linear;
		animation-iteration-count: infinite;

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

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

		&:nth-child(3) {
			animation-delay: 0.4s;
		}
	}

	@keyframes circles {
		0% {
			transform: scale(0);
			opacity: 0;
		}

		5% {
			opacity: 1;
		}

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

// Dots loader
[data-loader='circle'] {
	width: 40px;
	height: 40px;
	animation-play-state: paused;

	> span:nth-child(1) {
		display: flex;
		width: 40px;
		height: 40px;
		background: #c5cbd0;
		border-radius: 100%;
		animation-play-state: inherit;
		animation-name: circle;
		animation-duration: 1s;
		animation-delay: 0s;
		animation-timing-function: ease-in-out;
		animation-iteration-count: infinite;
	}

	> span {
		&:nth-child(2),
		&:nth-child(3) {
			display: none;
			visibility: hidden;
		}
	}

	@keyframes circle {
		0% {
			opacity: 1;
			transform: scale(0);
		}

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

// Dots loader
[data-loader='dots'] {
	display: flex;
	justify-content: space-between;
	width: 50px;
	height: 8px;
	animation-play-state: paused;

	> span {
		width: 8px;
		height: 8px;
		background: #c5cbd0;
		border-radius: 100%;
		animation-play-state: inherit;
		animation-name: dots;
		animation-duration: 1s;
		animation-timing-function: ease-in-out;
		animation-iteration-count: infinite;

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

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

		&:nth-child(3) {
			animation-delay: 0.4s;
		}
	}

	@keyframes dots {
		0% {
			transform: translateY(-5px);
		}

		50% {
			transform: translateY(5px);
		}

		100% {
			transform: translateY(-5px);
		}
	}
}