.loader {
	display: none;
	visibility: hidden;
	content-visibility: hidden;
	align-items: center;
	justify-content: center;
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #FFFFFF;
	z-index: 11;
}

.spinner-wrapper {
	display: flex;
	box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
	border-radius: 20px;
	padding: 20px;
}

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

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

.loader.active {
	display: flex;
	visibility: visible;
	content-visibility: visible;
}

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