.animloader {
	display: block;
	padding: 20px;
	text-align: center;
	--animloader-color: #383737;
}

.animloader-hidden {
	display: none !important;
	opacity: 0 !important;
}

.animloader-loader {
	display: inline-block;
}

.animloader-circle {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: inline-block;
	border-top: 3px solid var(--animloader-color);
	border-right: 3px solid transparent;
	box-sizing: border-box;
	animation: animloader-default-kf 1s linear infinite;
}

@keyframes animloader-default-kf {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.animloader-spinner {
	width: 50px;
	padding: 8px;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--animloader-color);
	
	--_m:
			conic-gradient(#0000 10%, #000),
			linear-gradient(#000 0%, #000 100%) content-box;
	
	-webkit-mask: var(--_m);
	mask: var(--_m);
	-webkit-mask-composite: source-out;
	mask-composite: subtract;
	animation: animloader-spinner-kf 1s infinite linear;
}

@keyframes animloader-spinner-kf {
	to {
		transform: rotate(1turn);
	}
}

.animloader-dots, .animloader-dots:before, .animloader-dots:after {
	border-radius: 50%;
	width: 2.5em;
	height: 2.5em;
	animation-fill-mode: both;
	animation: animloader-dots-kf 1.8s infinite ease-in-out;
}

.animloader-dots {
	color: var(--animloader-color);
	font-size: 7px;
	position: relative;
	text-indent: -9999em;
	transform: translateZ(0);
	animation-delay: -0.16s;
	margin-bottom: 30px;
}

.animloader-dots:before {
	content: '';
	position: absolute;
	top: 0;
	left: -3.5em;
	animation-delay: -0.32s;
}

.animloader-dots:after {
	content: '';
	position: absolute;
	top: 0;
	left: 3.5em;
}

@keyframes animloader-dots-kf {
	0% {
		box-shadow: 0 2.5em 0 -1.3em;
		opacity: 0.5;
	}
	40% {
		box-shadow: 0 2.5em 0 0;
	}
	80% {
		box-shadow: 0 2.5em 0 -1.3em;
	}
	100% {
		box-shadow: 0 2.5em 0 -1.3em;
		opacity: 1;
	}
}