CSS Pure - Spinner / Loading

spinner.css

/**
	<span class="spinner"></span>
	<span class="spinner spinner-md"></span>
	<span class="spinner spinner-lg"></span>
**/
@keyframes spinner-rotate {
    0% {
        transform: rotate(0)
    }

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

.spinner {
    border-radius: 50%;
    position: relative;
    margin: 0 auto;
    animation-name: spinner-rotate;
    animation-duration: 0.6s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    border-style: solid;
    display: inline-flex;
    width: 16px;
    height: 16px;
    border-width: 2px;
    -webkit-transform-origin: 50% 50% calc((16px / 2) + 2px);
    transform-origin: 50% 50% calc((16px / 2) + 2px);
    border-color: rgba(222,126,0,0.25);
    border-top-color: #de7e00;
}

.spinner.spinner-md {
    width: 32px;
    height: 32px;
    border-width: 3px;
    -webkit-transform-origin: 50% 50% calc((32px / 2) + 3px);
    transform-origin: 50% 50% calc((32px / 2) + 3px);
}

.spinner.spinner-lg {
    width: 64px;
    height: 64px;
    border-width: 4px;
    -webkit-transform-origin: 50% 50% calc((64px / 2) + 4px);
    transform-origin: 50% 50% calc((64px / 2) + 4px)
}

.spinner.spinner-dark {
    border-color: rgba(112,112,112,0.25);
    border-top-color: #707070
}

.spinner.spinner-light {
    border-color: rgba(255,255,255,0.25);
    border-top-color: #fff
}