Loading Spinner HTML & CSS

!Loading Spinner HTML & CSS

Loading Spinner HTML & CSS

spinner.css

/**************************/
/* Loading Spinner styles */
/**************************/

.spinner {
    --spinner-color: rgba(0, 0, 0, 255);
    --spinner-circle-width: 6px;
    position: absolute;
    width: 4em;
    height: 4em;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: inherit;
    pointer-events: none;
}

.spinner-container {
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    margin-top: -50%;
    margin-left: -50%;
    animation: spinner-linspin 1568.23529647ms linear infinite;
}

.spinner-rotator {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: spinner-easespin 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
}

.spinner-left {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 50%;
    overflow: hidden;
}

.spinner-right {
    position: absolute;
    top: 0;
    right: 0;
    left: 50%;
    bottom: 0;
    overflow: hidden;
}

.spinner-circle {
    box-sizing: border-box;
    position: absolute;
    width: 200%;
    height: 100%;
    border-style: solid;
    border-color: var(--spinner-color) var(--spinner-color) transparent;
    border-radius: 50%;
    border-width: var(--spinner-circle-width);
}

.spinner-left .spinner-circle {
    left: 0;
    right: -100%;
    border-right-color: transparent;
    animation: spinner-left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
}

.spinner-right .spinner-circle {
    left: -100%;
    right: 0;
    border-left-color: transparent;
    animation: right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
}

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

@keyframes spinner-easespin {
    12.5% {
        transform: rotate(135deg);
    }

    25% {
        transform: rotate(270deg);
    }

    37.5% {
        transform: rotate(405deg);
    }

    50% {
        transform: rotate(540deg);
    }

    62.5% {
        transform: rotate(675deg);
    }

    75% {
        transform: rotate(810deg);
    }

    87.5% {
        transform: rotate(945deg);
    }

    to {
        transform: rotate(1080deg);
    }
}

@keyframes spinner-left-spin {
    0% {
        transform: rotate(130deg);
    }

    50% {
        transform: rotate(-5deg);
    }

    to {
        transform: rotate(130deg);
    }
}

@keyframes right-spin {
    0% {
        transform: rotate(-130deg);
    }

    50% {
        transform: rotate(5deg);
    }

    to {
        transform: rotate(-130deg);
    }
}

spinner.html

<div class="spinner">
    <div class="spinner-container">
        <div class="spinner-rotator">
            <div class="spinner-left">
                <div class="spinner-circle"></div>
            </div>
            <div class="spinner-right">
                <div class="spinner-circle"></div>
            </div>
        </div>
    </div>
</div>