.preloader {
	&.bubble-pops {
		overflow: visible;
		padding-top: 2em;
		height: 0;
		width: 2em;
		@extend %posAbsolute;
		top: 50%;
		left: 50%;
		@include transform(translate(-50%, -50%));
		.bubble-pop {
			border: 0 solid var(--white);
			height: 0;
			width: 0;
			box-sizing: border-box;
			border-radius: 50%;
			@include animation(bubble-pop 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1));
			@extend %floatToCenter;
		}
		.bubble-label {
			@extend %pullLeft;
			margin-left: 50%;
			@include transform(translateX(-50%));
			margin: 0.5em 0 0 50%;
			font-size: 0.875em;
			letter-spacing: 0.1em;
			line-height: 1.5em;
			color: var(--white);
			white-space: nowrap;
			@include animation(bubble-label 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1));
		}
	}
	@include keyframes(bubble-pop) {
		0% {
			height: 0;
			width: 0;
			background-color: var(--black-alpha2);
		}
		29% {
			background-color: var(--black-alpha2);
		}
		30% {
			height: 2em;
			width: 2em;
			background-color: transparent;
			border-width: 1em;
			opacity: 1;
		}
		100% {
			height: 2em;
			width: 2em;
			border-width: 0;
			opacity: 0;
			background-color: transparent;
		}
	}
	@include keyframes(bubble-label) {
		0% {
			@include opacity(0.25);
		}
		30% {
			@include opacity(1);
		}
		100% {
			@include opacity(0.25);
		}
	}
	&.sk-cube-grid {
		width: 40px;
		height: 40px;
		display: grid;
		grid-template-columns: 33% 33% 33%;
		grid-gap: 2px;
		.sk-cube {
			width: 100%;
			height: 100%;
			background-color: var(--white);
			@extend %pullLeft;
			transform: scale(0);
			transform-origin: center center;
			@include animation(sk-cubeGridScaleDelay 1.2s infinite linear);
			&.sk-cube1,
			&.sk-cube5,
			&.sk-cube9 {
				animation-delay: 0.3s;
			}
			&.sk-cube4,
			&.sk-cube8 {
				animation-delay: 0.1s;
			}
			&.sk-cube2,
			&.sk-cube6 {
				animation-delay: 0.5s;
			}
			&.sk-cube3 {
				animation-delay: 0.7s;
			}
		}
	}
	@include keyframes(sk-cubeGridScaleDelay) {
		0% {
			transform: scale(0);
		}
		40% {
			transform: scale(1);
		}
		80% {
			transform: scale(1);
		}
		100% {
			transform: scale(0);
		}
	}
	&.gooey {
		width: 142px;
		height: 40px;
		background: #fff;
		filter: contrast(20);
		.dot {
			position: absolute;
			width: 16px;
			height: 16px;
			top: 12px;
			left: 15px;
			filter: blur(4px);
			background: #000;
			border-radius: 50%;
			transform: translateX(0);
			animation: dot 2.8s infinite;
		}
		.dots {
			transform: translateX(0);
			margin-top: 12px;
			margin-left: 31px;
			animation: dots 2.8s infinite;
			span {
				display: block;
				float: left;
				width: 16px;
				height: 16px;
				margin-left: 16px;
				filter: blur(4px);
				background: #000;
				border-radius: 50%;
			}
		}
	}
	@include keyframes(dot) {
		50% {
			transform: translateX(96px);
		}
	}
	@include keyframes(dots) {
		50% {
			transform: translateX(-31px);
		}
	}
	&.multiSpinnerColors {
		width: 66px;
		height: 66px;
		@include animation(contanim 2s infinite linear);
		svg {
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			position: absolute;
			transform: rotate(-90deg);
			@for $i from 1 through 4 {
				&:nth-child(#{$i}) circle {
					stroke: nth($multiSpinnerColors, $i);
					stroke-dasharray: 1, 300;
					stroke-dashoffset: 0;
					animation: strokeanim 3s calc(.2s * (#{$i})) ease infinite;
					transform-origin: center center;
				}
			}
		}
	}
	@include keyframes(strokeanim) {
		0% {
			stroke-dasharray: 1, 300;
			stroke-dashoffset: 0;
		}
		50% {
			stroke-dasharray: 120, 300;
			stroke-dashoffset: -$multiSpinnerDia / 3;
		}
		100% {
			stroke-dasharray: 120, 300;
			stroke-dashoffset: -$multiSpinnerDia;
		}
	}
	@include keyframes(contanim) {
		100% {
			transform: rotate(360deg);
		}
	}
	&.dot-loader {
		> div {
			width: 5px;
			height: 5px;
			border-radius: 100%;
			display: inline-block;
			overflow: hidden;
			-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
			animation: sk-bouncedelay 1.4s infinite ease-in-out both;
			&.bounce1 {
				-webkit-animation-delay: -0.32s;
				animation-delay: -0.32s;
			}
			&.bounce2 {
				-webkit-animation-delay: -0.16s;
				animation-delay: -0.16s;
			}
		}
	}
	@include keyframes(sk-bouncedelay) {
		0%,
		80%,
		100% {
			-webkit-transform: scale(0);
			transform: scale(0);
		}
		40% {
			-webkit-transform: scale(1);
			transform: scale(1);
		}
	}
	&.shimmerLoader {
		@extend %displayFlex;
		@extend %flexRow;
		flex: 1;
		%gradient-animation {
			@include animation(placeHolderShimmer 1s forwards infinite linear);
			background: #f6f6f6;
			background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
			background-size: 800px 104px;
			height: 96px;
			@extend %posRelative;
		}
		.image {
			@extend %gradient-animation;
		}
		.text {
			.text-line {
				@extend %gradient-animation;
			}
		}
	}
	@include keyframes(placeHolderShimmer) {
		0% {
			background-position: -468px 0;
		}
		100% {
			background-position: 468px 0;
		}
	}
}
.color-loader {
	border: 7px solid black;
	border-radius: 50%;
	border-top: 7px solid var(--red);
	width: 50px;
	height: 50px;
	@extend %posRelative;
	animation: spin 1000ms linear infinite;
	&:before {
		content: '';
		@extend %posAbsolute;
		border: 7px solid transparent;
		top: -8px;
		left: -9px;
		border-top: 7px solid var(--orange);
		border-radius: 50%;
		height: 38px;
		width: 38px;
		transform: rotate(123deg);
	}
	&:after {
		content: '';
		@extend %posAbsolute;
		border: 7px solid transparent;
		top: -8px;
		left: -7px;
		border-top: 7px solid var(--green);
		border-radius: 50%;
		height: 38px;
		width: 38px;
		transform: rotate(245deg);
	}
}
.color-loader-2 {
	border: 7px solid var(--gray);
	border-top: 7px solid transparent;
	border-radius: 50%;
	height: 70px;
	width: 70px;
	display: flex;
	justify-content: center;
	align-items: center;
	@extend %posRelative;
	animation: spin 1.2s linear infinite;
	&:before {
		content: '';
		@extend %posAbsolute;
		height: 35px;
		width: 35px;
		border: 7px solid transparent;
		border-top: 7px solid var(--orange);
		border-radius: 50%;
		animation: spin 1.1s linear infinite;
	}
	span {
		@extend %posAbsolute;
		display: flex;
		height: 30px;
		width: 30px;
		border: 7px solid transparent;
		border-top: 7px solid var(--blue);
		border-radius: 50%;
		animation: spin-reverse 500ms linear infinite;
	}
}
.color-loader-3 {
	display: block;
	@extend %posRelative;
	width: 50px;
	height: 50px;
	border-radius: 10%;
	background: var(--orange);
	overflow: hidden;
	animation: rotate calc(4000ms * 2) cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
	&:before,
	&:after {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 50%;
		height: 50%;
		background: var(--blue);
		animation: slide 4000ms cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
	}
	&:after {
		animation-delay: calc((4000ms / 2) * -1);
	}
}

.progress-anim-1 {
	background-color: var(--gray);
	border-radius: 13px;
	position: relative;
	padding: 2px;
	overflow: hidden;
	> div {
		background-color: orange;
		width: 40%;
		height: 20px;
		border-radius: 10px;
		position: absolute;
		top: 0;
		left: 0;
		animation: progress1 1500ms linear infinite;
	}
}
.progress-anim-2 {
	background-color: var(--gray);
	border-radius: 13px;
	position: relative;
	padding: 2px;
	overflow: hidden;
	> div {
		background-color: var(--red);
		width: 40%;
		height: 20px;
		border-radius: 10px;
		position: absolute;
		top: 0;
		right: 0;
		animation: progress2 1500ms linear infinite;
	}
}
@include keyframes(progress1) {
	0% {
		left: -100%;
	}
	100% {
		left: 100%;
	}
}
@include keyframes(progress2) {
	0% {
		right: -100%;
	}
	100% {
		right: 100%;
	}
}