body {
    position: relative;
}

    /* Spinner hidden when 'no-spinner' class is added */
    body.no-spinner::before,
    body.no-spinner::after {
        display: none;
    }

    /* Spinner Styles - active by default */
    body::before {
        content: '';
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background-color: rgba(255, 255, 255, 1);
        z-index: 9999;
    }

    body::after {
        content: '';
        display: block;
        position: fixed;
        left: 50%;
        top: 50%;
        width: 40px;
        height: 40px;
        margin: -20px 0 0 -20px; /* Center the spinner */
        border-style: solid;
        border-color: black;
        border-top-color: transparent;
        border-width: 4px;
        border-radius: 50%;
        z-index: 10000; /* Higher than the background */
        -webkit-animation: spin .8s linear infinite;
        animation: spin .8s linear infinite;
    }

/* Spin Animation */
@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

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