body {
	position: relative;
    display: inline-block;
	min-width: 100vw;
	height: 100vh;
	margin: 0;
	padding: 0;
}

:root {
	--ball-radius: min(max(5vh, 5vw), 75px);
}

.spinner {
	width: 100%;
	height: 100%;
	background-color: rgba(125, 125, 125, 0.8);
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 99;
	transition: opacity 750ms;
	user-select: none;
	opacity: 0;
	transform: scale(0);
}

.spinner.active {
	opacity: 1;
	transform: scale(1);
}

.spinner-ball {
	width: var(--ball-radius);
	height: var(--ball-radius);
	border-radius: 100%;
	background: linear-gradient(165deg,
		rgba(255,255,255,1) 0%,
		rgb(220, 220, 220) 40%,
		rgb(170, 170, 170) 98%,
		rgb(10, 10, 10) 100%);
	position: absolute;
	top: calc(50% - (var(--ball-radius) / 2));
	left: calc(50% - (var(--ball-radius) / 2));
	opacity: 0;
	transition: 500ms;
}

.success-ball {
	width: var(--ball-radius);
	height: var(--ball-radius);
	border-radius: 100%;
	background: linear-gradient(165deg,
	rgba(215, 255, 215,1) 0%,
	rgb(140, 250, 140) 40%,
	rgb(220, 255, 220) 98%,
	rgb(10, 10, 10) 100%);
	position: absolute;
	top: calc(50% - (var(--ball-radius) / 2));
	left: calc(50% - (var(--ball-radius) / 2));
	opacity: 0;
	transition: 750ms;
}

.failure-ball {
	width: var(--ball-radius);
	height: var(--ball-radius);
	border-radius: 100%;
	background: linear-gradient(165deg,
		rgba(255,215,215,1) 0%,
		rgb(250, 140, 140) 40%,
		rgb(255, 220, 220) 98%,
		rgb(10, 10, 10) 100%);
	position: absolute;
	top: calc(50% - (var(--ball-radius) / 2));
	left: calc(50% - (var(--ball-radius) / 2));
	opacity: 0;
	transition: 750ms;
}

.spinner.active > .spinner-ball,
.spinner > .success-ball.active,
.spinner > .failure-ball.active {
	opacity: 1;
}

.spinner-ball:before {
	position: absolute;
	content: '';
	width: 100%;
	height: 100%;
	border-radius: 100%;
	border-bottom: 0 solid #ffffff50;

	box-shadow:
		0 -4px 6px 6px #ffffff60 inset,
		0 -3px 5px 4px #ffffff70 inset,
		0 -1px 3px #ffffff80 inset,
		0 -2px 1px #ffffffBB inset,
		0 1px 0 #ffffff,
		0 1px 2px #ffffff,
		0 3px 3px #ffffff90,
		0 4px 5px #ffffff70,
		0 4px 6px 6px #ffffff60;
	filter: blur(4px);
	animation: 2s rotate linear infinite;
}

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