moon-spinner.styl

$spinner-size = 60px;
$spinner-line-size = 3px;
$spinner-duration = 1500ms;
$color-accent = #1e76e3;

.spinner {
	position: relative;
	min-width: $spinner-size;
	min-height: $spinner-size;
}
 
.spinner:before {
    content: 'Loading…';
    position: absolute;
    top: 0;
    left: 0;
    width: $spinner-size;
	height: $spinner-size;
    margin-top: -($spinner-line-size / 2);
    margin-left: -($spinner-line-size / 2);
}
 
.spinner:not(:required):before {
    content: '';
    border-radius: 50%;
    border-top: $spinner-line-size solid $color-accent;
    border-right: $spinner-line-size -1 solid $color-accent;
    border-bottom: $spinner-line-size solid transparent;
    animation: spinner__container-rotate $spinner-duration linear infinite;
}

@keyframes spinner__container-rotate {
	to { transform: rotate(360deg) }
}