CSS loading spinner

This is a CSS loading spinner solution with just one line of HTML!

Preview

Html

Click to edit (doesn't update preview)

<span class="loader-spinner"></span>

CSS

Click to edit (doesn't update preview)

.loader-spinner {
    width: 3rem;
    height: 3rem;
    border: 0.4rem solid #FFF;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: block;
    animation: rotateLoaderSpinner 1s linear infinite;
}

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

Description

Changing the spinner color

You can change the color by editing the border color, which is currently set to #FFF.

Changing the spinner size

You can change the size by editing the width and height attributes (currently set to 3rem), and the spinner thickness by editing the border width (currently set to 0.4rem).

Accessibility

You can add the HTML element an attribute aria-label="Loading..." to announce the element to screen readers. I didn't add it to the code, because there's a risk that developers with less experience on accessibility might accidentally announce it even when the spinner is not visible. For example, hiding the spinner using opacity: 0; would make it still be announced to screen readers, and instead, it needs to be hidden using display: none;.