CSS to set Loading symbol user responsive

To ensure Loading symbol covers the entire screen regardless of the user’s scroll position, you need to set the #loader‘s position to fixed instead of absolute

#loader {
    /*............*/
    visibility: hidden;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ccc;
    position: fixed; /* Change from absolute to fixed */
    opacity: 75%;
    z-index: 9999;
}


#spinner {
    border: 16px solid #696565;
    border-radius: 50%;
    border-top: 16px solid #50db34;
    position: fixed; /* Change from absolute to fixed */
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Center the spinner exactly */
    width: 200px;
    height: 200px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
}


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


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


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


    100% {
        transform: rotate(360deg);
    }
}