.loading {
    position: fixed;
    display: none; /* Hide the loader initially */
    z-index: 99999999999;
    height: 100px; /* Set the height and width to match your GIF's dimensions */
    width: 100px;
    top: 50%;
    left: 50%;
    margin-top: -50px; /* Center the loader */
    margin-left: -50px;
    background-image: url('../images/M3loader.gif'); /* Path to your GIF */
    background-size: contain; /* Ensure the entire GIF is visible */
    background-repeat: no-repeat;
}

    .loading:before {
        content: '';
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3); /* Transparent overlay */
    }

    .loading:not(:required) {
        font: 0/0 a;
        color: transparent;
        text-shadow: none;
        background-color: transparent;
        border: 0;
    }