.loader {
	display: flex;
	visibility: hidden;
	content-visibility: hidden;
	opacity: 0;
	align-items: center;
	justify-content: center;
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(10, 12, 16, 0.88);
	z-index: 30;
	transition: visibility 0.2s linear, opacity 0.2s ease;
}

.loader.active {
	visibility: visible;
	content-visibility: visible;
	opacity: 1;
}

.spinner-wrapper {
	display: flex;
}

.spinner {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: radial-gradient(farthest-side, #ffffff 94%, transparent) top/7px 7px no-repeat,
		conic-gradient(transparent 30%, #ffffff);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000000 0);
	animation: none;
}

@keyframes spinner {
	100% {
		transform: rotate(1turn);
	}
}

.loader.active .spinner, .spinner.active {
	animation: spinner 1s infinite linear;
}