Spinner

HTML

<div class="spinner"></div>

CSS

.spinner {
    /* Size */
    height: 4rem;
    width: 4rem;

    /* Create a curve at the top */
    border: 4px solid #d1d5db;
    border-top-color: #3b82f6;
    border-radius: 50%;

    animation: spinner 800ms linear infinite;
}

@keyframes spinner {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

See also

• Indeterminate progress bar