styleui-components/css/spinners.css

Lightweight, modular UI component library with zero dependencies

/*------------------------------------*\\
#SPINNERS
\\*------------------------------------*/

.spinner {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: -0.125em;
    border: 0.25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border .75s linear infinite;
}

@keyframes spinner-border {
    to { transform: rotate(360deg); }
}

/* Sizing */
.spinner-sm {
    width: 1rem;
    height: 1rem;
    border-width: 0.2em;
}

.spinner-lg {
    width: 3rem;
    height: 3rem;
    border-width: 0.3em;
}

/* Colors */
.spinner-primary { color: var(--primary); }
.spinner-secondary { color: var(--text-secondary); }
.spinner-success { color: var(--success); }
.spinner-error { color: var(--error); }
.spinner-warning { color: var(--warning); }
.spinner-info { color: var(--info); }