.kata-loader-wrapper {
	position: absolute;
	top: calc(50% - 50px);
	left: calc(50% - 50px);
}

/* Ball Chasing
-------------------------------------------------- */
.kata-ball-chasing .kata-loader {
	width: 100px;
	height: 100px;
	animation: kataRotate 2s linear infinite;
}

.kata-ball-chasing .kata-loader .kata-ball-1,
.kata-ball-chasing .kata-loader .kata-ball-2 {
	position: absolute;
	top: 0;
	width: 60%;
	height: 60%;
	border-radius: 50%;
	background-color: #fff;
	animation: kataChasingBallBounce 2s linear infinite;
}

.kata-ball-chasing .kata-loader .kata-ball-2 {
	top: auto;
	bottom: 0;
	animation-delay: -1s;
}

@keyframes kataChasingBallBounce {
	50% {
		transform: scale(0);
	}
}

/* Ball Pulse
-------------------------------------------------- */
.kata-ball-pulse {
	top: calc(50% - 60px);
	left: calc(50% - 60px);
}

.kata-ball-pulse .kata-loader {
	width: 120px;
	height: 120px;
}

.kata-ball-pulse .kata-ball {
	margin: 25% 0 0 25%;
	width: 50%;
	height: 50%;
	background-color: #fff;
	border-radius: 50%;
	animation: ballPulse 2s ease-in-out infinite;
}

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

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

/* Ball Pulse Double
-------------------------------------------------- */
.kata-ball-pulse-double {
	top: calc(50% - 60px);
	left: calc(50% - 60px);
}

.kata-ball-pulse-double .kata-loader {
	width: 120px;
	height: 120px;
}

.kata-ball-pulse-double .kata-ball-1,
.kata-ball-pulse-double .kata-ball-2 {
	position: absolute;
	top: 25%;
	left: 25%;
	width: 50%;
	height: 50%;
	background-color: #fff;
	border-radius: 50%;
	animation: ballPulseDouble 2s ease-in-out infinite;
	opacity: 0.5;
}

.kata-ball-pulse-double .kata-ball-2 {
	animation-delay: -1s;
}

@keyframes ballPulseDouble {
	0%,
	100% {
		transform: scale(0);
	}

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

/* Wave
-------------------------------------------------- */
.kata-wave {
	top: calc(50% - 75px);
	left: calc(50% - 75px);
}

.kata-wave .kata-loader {
	width: 150px;
	height: 150px;
}

.kata-wave .kata-loader > div {
	float: left;
	margin: 40% 2% 0 0;
	width: 4%;
	height: 16%;
	background-color: #fff;
	animation: kataWave 1s cubic-bezier(0.2, 0.68, 0.18, 1.08) infinite;
}

.kata-wave .kata-loader .kata-line-1 {
	margin-left: 30%;
}

.kata-wave .kata-loader .kata-line-1 {
	animation-delay: 0.1s;
}

.kata-wave .kata-loader .kata-line-2 {
	animation-delay: 0.2s;
}

.kata-wave .kata-loader .kata-line-3 {
	animation-delay: 0.3s;
}

.kata-wave .kata-loader .kata-line-4 {
	animation-delay: 0.4s;
}

.kata-wave .kata-loader .kata-line-5 {
	animation-delay: 0.5s;
}

/* Wave Spread
-------------------------------------------------- */
.kata-wave-spread {
	top: calc(50% - 75px);
	left: calc(50% - 75px);
}

.kata-wave-spread .kata-loader {
	width: 150px;
	height: 150px;
}

.kata-wave-spread .kata-loader > div {
	float: left;
	margin: 40% 2% 0 0;
	width: 4%;
	height: 16%;
	background-color: #fff;
	animation: kataWave 1s cubic-bezier(0.85, 0.25, 0.37, 0.85) infinite;
}

.kata-wave-spread .kata-loader .kata-line-1 {
	margin-left: 30%;
}

.kata-wave-spread .kata-loader .kata-line-1,
.kata-wave-spread .kata-loader .kata-line-5 {
	animation-delay: 0.4s;
}

.kata-wave-spread .kata-loader .kata-line-2,
.kata-wave-spread .kata-loader .kata-line-4 {
	animation-delay: 0.2s;
}

@keyframes kataWave {
	0%,
	100% {
		transform: scaleY(1);
	}

	50% {
		transform: scaleY(2);
	}
}

/* Circle Pulse
-------------------------------------------------- */
.kata-circle-pulse {
	top: calc(50% - 60px);
	left: calc(50% - 60px);
}

.kata-circle-pulse .kata-loader {
	width: 120px;
	height: 120px;
}

.kata-circle-pulse .kata-loader > div {
	margin: 23px 0 0 23px;
	width: 50%;
	height: 50%;
	border: 2px solid #fff;
	border-radius: 50%;
	animation: kataCirclePulse 1s ease infinite;
}

/* Circle Pulse Multiple
-------------------------------------------------- */
.kata-circle-pulse-multiple {
	top: calc(50% - 60px);
	left: calc(50% - 60px);
}

.kata-circle-pulse-multiple .kata-loader {
	width: 120px;
	height: 120px;
}

.kata-circle-pulse-multiple .kata-loader > div {
	position: absolute;
	top: 24px;
	left: 24px;
	width: 50%;
	height: 50%;
	border: 2px solid #fff;
	border-radius: 50%;
	animation: kataCirclePulse 1s ease infinite;
}

.kata-circle-pulse-multiple .kata-loader .kata-circle-2 {
	animation-delay: -0.9s;
}

.kata-circle-pulse-multiple .kata-loader .kata-circle-3 {
	animation-delay: -0.8s;
}

@keyframes kataCirclePulse {
	0% {
		transform: scale(0.1);
	}

	80% {
		opacity: 0.8;
	}

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

/* Arc Rotate Double
-------------------------------------------------- */
.kata-arc-rotate-double .kata-loader {
	width: 100px;
	height: 100px;
}

.kata-arc-rotate-double .kata-loader > div {
	position: absolute;
	border: 2px solid;
	border-color: transparent #fff;
	border-radius: 50%;
	animation: kataLoad 1s infinite ease-in-out;
}

.kata-arc-rotate-double .kata-loader .kata-arc-1 {
	margin: 32% 0 0 32%;
	width: 36%;
	height: 36%;
}

.kata-arc-rotate-double .kata-loader .kata-arc-2 {
	margin: 40% 0 0 40%;
	width: 20%;
	height: 20%;
	animation-direction: reverse;
	animation-delay: -0.5s;
}

@keyframes kataLoad {
	0% {
		transform: rotate(0) scale(1);
	}

	50% {
		transform: rotate(180deg) scale(0.6);
	}

	100% {
		transform: rotate(360deg) scale(1);
	}
}

/* Square Split
-------------------------------------------------- */
.kata-square-split {
	top: calc(50% - 75px);
	left: calc(50% - 75px);
}

.kata-square-split .kata-loader {
	width: 150px;
	height: 150px;
}

.kata-square-split .kata-loader > div {
	float: left;
	width: 50%;
	height: 50%;
}

.kata-square-split .kata-loader > div::after {
	content: "";
	display: block;
	margin: 50% 0 0 50%;
	width: 50%;
	height: 50%;
	background: #fff;
	animation: kataSquareSplit 2s infinite ease-in-out alternate;
}

.kata-square-split .kata-loader .kata-square-2 {
	transform: rotate(90deg);
}

.kata-square-split .kata-loader .kata-square-3 {
	transform: rotate(270deg);
	animation-direction: reverse;
}

.kata-square-split .kata-loader .kata-square-4 {
	transform: rotate(180deg);
	animation-direction: reverse;
}

@keyframes kataSquareSplit {
	20% {
		transform: rotate(0deg);
		margin: 50% 0 0 50%;
	}

	50% {
		transform: rotate(90deg);
		margin: 0px;
	}

	80% {
		transform: rotate(180deg);
		margin: 50% 0 0 50%;
	}

	100% {
		transform: rotate(180deg);
		margin: 50% 0 0 50%;
	}
}

/* Arc Rotate
-------------------------------------------------- */
.kata-arc-rotate {
	top: calc(50% - 75px);
	left: calc(50% - 75px);
}

.kata-arc-rotate .kata-loader {
	width: 150px;
	height: 150px;
}

.kata-arc-rotate .kata-loader .kata-arc {
	position: absolute;
	border: 2px solid;
	border-color: transparent #fff #fff #fff;
	border-radius: 50%;
	margin: 32% 0 0 32%;
	width: 36%;
	height: 36%;
	animation: kataSingleArcRotate 1s infinite linear;
}

@keyframes kataSingleArcRotate {
	100% {
		transform: rotate(360deg);
	}
}

/* Arc Rotate2
-------------------------------------------------- */
.kata-arc-rotate2 {
	top: calc(50% - 75px);
	left: calc(50% - 75px);
}

.kata-arc-rotate2 .kata-loader {
	width: 150px;
	height: 150px;
}

.kata-arc-rotate2 .kata-loader .kata-arc {
	position: absolute;
	width: 100%;
	height: 100%;
}

.kata-arc-rotate2 .kata-loader .kata-arc::before,
.kata-arc-rotate2 .kata-loader .kata-arc::after {
	content: "";
	position: absolute;
	top: 32%;
	left: 32%;
	border: 2px solid;
	border-radius: 50%;
	width: 36%;
	height: 36%;
}

.kata-arc-rotate2 .kata-loader .kata-arc::before {
	border-color: #fff;
	opacity: 0.3;
}

.kata-arc-rotate2 .kata-loader .kata-arc::after {
	border-color: transparent;
	border-bottom-color: #fff;
	animation: kataRotate 1s infinite linear;
}

/* Arc Scale
-------------------------------------------------- */
.kata-arc-scale .kata-loader {
	width: 100px;
	height: 100px;
}

.kata-arc-scale .kata-loader .kata-arc {
	position: relative;
	margin: 25% 0 0 25%;
	width: 50%;
	height: 50%;
	border: 4px solid #fff;
	border-radius: 50%;
	animation: kataRotate 2.9s infinite linear;
}

.kata-arc-scale .kata-loader .kata-arc::before,
.kata-arc-scale .kata-loader .kata-arc::after {
	content: "";
	position: absolute;
	top: -5px;
	width: 33px;
	height: 62px;
	background-color: var(--ct-base-color);
	animation: kataRotate 2s infinite ease;
}

.kata-arc-scale .kata-loader .kata-arc::before {
	left: -6px;
	transform-origin: 29px 29px;
}

.kata-arc-scale .kata-loader .kata-arc::after {
	left: 27px;
	transform-origin: 0 29px;
	animation-delay: 0.5s;
}

/* Clock
-------------------------------------------------- */
.kata-clock .kata-loader {
	width: 100px;
	height: 100px;
}

.kata-clock .kata-loader .kata-arc {
	position: relative;
	margin: 23% 0 0 23%;
	border: 2px solid #fff;
	width: 50px;
	height: 50px;
	border-radius: 50%;
}

.kata-clock .kata-loader .kata-arc::after,
.kata-clock .kata-loader .kata-arc::before {
	content: "";
	position: absolute;
	top: 4%;
	left: 48%;
	width: 4%;
	height: 46%;
	background-color: #fff;
	transform-origin: 50% 100%;
	border-radius: 5px;
	animation: kataRotate 2s infinite linear;
}

.kata-clock .kata-loader .kata-arc::after {
	height: 36%;
	top: 14%;
	animation-duration: 12s;
}

@keyframes kataRotate {
	100% {
		transform: rotate(360deg);
	}
}

/* Square Rotate 3D
-------------------------------------------------- */
.kata-square-rotate-3d .kata-loader {
	width: 100px;
	height: 100px;
}

.kata-square-rotate-3d .kata-loader .kata-square {
	margin-top: 25%;
	margin-left: 25%;
	width: 50%;
	height: 50%;
	background-color: #fff;
	animation: kataSquareRotate3d 2s infinite ease-in-out;
}

@keyframes kataSquareRotate3d {
	25% {
		transform: perspective(100px) rotateX(180deg) rotateY(0);
	}

	50% {
		transform: perspective(100px) rotateX(180deg) rotateY(-180deg);
	}

	75% {
		transform: perspective(100px) rotateX(0) rotateY(-180deg);
	}

	100% {
		transform: perspective(100px) rotateX(0) rotateY(0);
	}
}

/* Spinner
-------------------------------------------------- */
.kata-spinner {
	width: 90px;
	height: 90px;
	top: calc(50% - 40px);
	left: calc(50% - 40px);
	background: transparent;
	border-top: 4px solid #ffffff;
	border-right: 4px solid transparent;
	border-radius: 50%;
	animation: 1s kataSpin linear infinite;
}

@keyframes kataSpin {
	from {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	to {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

/* Whirlpool
-------------------------------------------------- */
.kata-whirlpool .kata-ring:before {
	content: "";
	border-radius: 50%;
	border: 1px solid #ffffff;
	height: 30px;
	width: 100px;
	position: absolute;
}

.kata-whirlpool .kata-ring1:before {
	left: 40px;
	width: 20px;
	top: 12px;
	height: 6px;
	animation: 2.5s ease 0s infinite kataSpinner;
}

.kata-whirlpool .kata-ring2:before {
	left: 35px;
	width: 30px;
	top: 10.5px;
	height: 9px;
	animation: 2.5s ease 0.1s infinite kataSpinner;
}

.kata-whirlpool .kata-ring3:before {
	left: 30px;
	width: 40px;
	top: 9px;
	height: 12px;
	animation: 2.5s ease 0.2s infinite kataSpinner;
}

.kata-whirlpool .kata-ring4:before {
	left: 25px;
	width: 50px;
	top: 7.5px;
	height: 15px;
	animation: 2.5s ease 0.3s infinite kataSpinner;
}

.kata-whirlpool .kata-ring5:before {
	left: 20px;
	width: 60px;
	top: 6px;
	height: 18px;
	animation: 2.5s ease 0.4s infinite kataSpinner;
}

.kata-whirlpool .kata-ring6:before {
	left: 15px;
	width: 70px;
	top: 4.5px;
	height: 21px;
	animation: 2.5s ease 0.5s infinite kataSpinner;
}

.kata-whirlpool .kata-ring7:before {
	left: 10px;
	width: 80px;
	top: 3px;
	height: 24px;
	animation: 2.5s ease 0.6s infinite kataSpinner;
}

.kata-whirlpool .kata-ring8:before {
	left: 5px;
	width: 90px;
	top: 1.5px;
	height: 27px;
	animation: 2.5s ease 0.7s infinite kataSpinner;
}

.kata-whirlpool .kata-ring9:before {
	width: 100px;
	height: 30px;
	animation: 2.5s ease 0.8s infinite kataSpinner;
}

@keyframes kataSpinner {
	0% {
		transform: translateY(10px);
		animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
	}

	50% {
		transform: translateY(60px);
		animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
	}

	100% {
		transform: translateY(10px);
		animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
	}
}

/* Drawing
-------------------------------------------------- */
.kata-drawing .kata-loading-dot {
	border-radius: 100%;
	height: 10px;
	width: 10px;
	background-color: #ffffff;
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	top: 0;
	bottom: 0;
	box-shadow:
		0px 40px 0px 0px #ffffff,
		0px -40px 0px 0px #ffffff,
		40px 0px 0px 0px #ffffff,
		-40px 0px 0px 0px #ffffff,
		40px 40px 0px 0px #ffffff,
		-40px -40px 0px 0px #ffffff,
		40px -40px 0px 0px #ffffff,
		-40px 40px 0px 0px #ffffff;
	animation: kataDrawing 3s infinite linear;
}

@keyframes kataDrawing {
	0% {
		transform: translate(0px, 0px), rotate(0deg);
		box-shadow:
			0px 40px 0px 0px #ffffff,
			0px -40px 0px 0px #ffffff,
			40px 0px 0px 0px #ffffff,
			-40px 0px 0px 0px #ffffff,
			40px 40px 0px 0px #ffffff,
			-40px -40px 0px 0px #ffffff,
			40px -40px 0px 0px #ffffff,
			-40px 40px 0px 0px #ffffff;
	}

	25% {
		box-shadow:
			0px 40px 0px 0px #ffffff,
			0px -40px 0px 0px #ffffff,
			40px 0px 0px 0px #ffffff,
			-40px 0px 0px 0px #ffffff,
			-40px -40px 0px 0px #ffffff,
			40px 40px 0px 0px #ffffff,
			-40px 40px 0px 0px #ffffff,
			40px -40px 0px 0px #ffffff;
	}

	50% {
		box-shadow:
			0px -40px 0px 0px #ffffff,
			0px 40px 0px 0px #ffffff,
			-40px 0px 0px 0px #ffffff,
			40px 0px 0px 0px #ffffff,
			-40px -40px 0px 0px #ffffff,
			40px 40px 0px 0px #ffffff,
			-40px 40px 0px 0px #ffffff,
			40px -40px 0px 0px #ffffff;
	}

	70% {
		box-shadow:
			0px 0px 0px 0px #ffffff,
			0px 0px 0px 0px #ffffff,
			0px 0px 0px 0px #ffffff,
			0px 0px 0px 0px #ffffff,
			0px 0px 0px 0px #ffffff,
			0px 0px 0px 0px #ffffff,
			0px 0px 0px 0px #ffffff,
			0px 0px 0px 0px #ffffff;
	}

	75% {
		box-shadow:
			0px 0px 0px 0px #ffffff,
			0px 0px 0px 0px #ffffff,
			0px 0px 0px 0px #ffffff,
			0px 0px 0px 0px #ffffff,
			0px 0px 0px 0px #ffffff,
			0px 0px 0px 0px #ffffff,
			0px 0px 0px 0px #ffffff,
			0px 0px 0px 0px #ffffff;
		height: 10px;
		width: 10px;
	}

	80% {
		transform: translate(0px, 0px) rotate(360deg);
		box-shadow:
			0px 0px 0px 0px #ffffff,
			0px 0px 0px 0px #ffffff,
			0px 0px 0px 0px #ffffff,
			0px 0px 0px 0px #ffffff,
			0px 0px 0px 0px #ffffff,
			0px 0px 0px 0px #ffffff,
			0px 0px 0px 0px #ffffff,
			0px 0px 0px 0px #ffffff;
		background-color: #ffffff;
		height: 40px;
		width: 40px;
	}

	85% {
		transform: translate(0px, 0px) rotate(360deg);
		box-shadow:
			0px 0px 0px 0px #ffffff,
			0px 0px 0px 0px #ffffff,
			0px 0px 0px 0px #ffffff,
			0px 0px 0px 0px #ffffff,
			0px 0px 0px 0px #ffffff,
			0px 0px 0px 0px #ffffff,
			0px 0px 0px 0px #ffffff,
			0px 0px 0px 0px #ffffff;
		background-color: #ffffff;
		height: 40px;
		width: 40px;
	}

	90% {
		transform: translate(0px, 0px) rotate(360deg);
		box-shadow:
			0px 0px 0px 0px #ffffff,
			0px 0px 0px 0px #ffffff,
			0px 0px 0px 0px #ffffff,
			0px 0px 0px 0px #ffffff,
			0px 0px 0px 0px #ffffff,
			0px 0px 0px 0px #ffffff,
			0px 0px 0px 0px #ffffff,
			0px 0px 0px 0px #ffffff;
		background-color: #ffffff;
		height: 10px;
		width: 10px;
	}

	95% {
		box-shadow:
			0px 40px 0px 0px #ffffff,
			0px -40px 0px 0px #ffffff,
			40px 0px 0px 0px #ffffff,
			-40px 0px 0px 0px #ffffff,
			40px 40px 0px 0px #ffffff,
			-40px -40px 0px 0px #ffffff,
			40px -40px 0px 0px #ffffff,
			-40px 40px 0px 0px #ffffff;
	}

	100% {
		transform: rotate(360deg);
		box-shadow:
			0px 40px 0px 0px #ffffff,
			0px -40px 0px 0px #ffffff,
			40px 0px 0px 0px #ffffff,
			-40px 0px 0px 0px #ffffff,
			40px 40px 0px 0px #ffffff,
			-40px -40px 0px 0px #ffffff,
			40px -40px 0px 0px #ffffff,
			-40px 40px 0px 0px #ffffff;
	}
}