.loader {
	display: flex;
	/* display: none; */
	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: #121111bd;
	border: 1px solid rgb(255 255 255 / .08);
	box-shadow: 0 1px 2px rgb(0 0 0 / .3), 0 12px 40px rgb(0 0 0 / .45);
	-webkit-backdrop-filter: blur(24px) saturate(180%);
	backdrop-filter: blur(24px) saturate(180%);
	z-index: 10;
	transition: visibility .2s linear, opacity .2s ease;
	overflow: hidden;
}

.loader.active {
	/* display: flex; */
	visibility: visible;
	content-visibility: visible;
	opacity: 1;
}

.spinner-wrapper {
	display: flex;
	padding: 20px;
}

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

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

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