Блог

У меня есть символ загрузки, который работает нормально, но когда открывается символ загрузки, я вижу фон, и пользователь может редактировать текстовое поле в бэкэнде. Мне нужно отключить фон, пока загрузка не завершится. Нужно размыть фон. Попробовал наложить. Кажется, ничего не работает.

Вот мой код.

 <style>
    .lds-dual-ring.hidden {
        display: none;
    }

    .overlay {
        background: rgba(0,0,0,.5);
        height: 100vh;
        left: 50%;
        opacity: 1;
        position: fixed;
        top: 50%;
        transition: all 0.5s;
        width: 100%;
        z-index: 99000;
    }

    .lds-dual-ring {
        display: inline-block;
        height: 80px;
        width: 80px;
    }

        .lds-dual-ring:after {
            animation: lds-dual-ring 1.2s linear infinite;
            border: 6px solid #fff;
            border-color: #fff transparent #fff transparent;
            border-radius: 50%;
            content: " ";
            display: block;
            height: 64px;
            margin: 5% auto;
            width: 64px;
        }

    @@keyframes lds-dual-ring {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }
</style>

<div id="loader1" class="lds-dual-ring hidden overlay"></div>

$('#loader1').removeClass('hidden'); //to show
 

Я воссоздал рабочий пример кода, который вы предоставили.

Ваш div содержит оба overlay lsd-dual-ring класса и. ИМО, чего вы хотите добиться, так это чтобы загрузочное кольцо находилось внутри наложения div и располагалось в центре экрана.

 .lds-dual-ring.hidden {
    display: none;
}

.overlay {
    background: rgba(0,0,0,.5);
    height: 100vh;
    left: 0;
    opacity: 1;
    position: fixed;
    top: 0;
    transition: all 0.5s;
    width: 100%;
    z-index: 99000;
}

.lds-dual-ring {
    display: inline-block;
    height: 80px;
    width: 80px;
    top: 50%;
    left: 50%;
    position: fixed;
}

    .lds-dual-ring:after {
        animation: lds-dual-ring 1.2s linear infinite;
        border: 6px solid #fff;
        border-color: #fff transparent #fff transparent;
        border-radius: 50%;
        content: " ";
        display: block;
        height: 64px;
        margin: 5% auto;
        width: 64px;
    }

@@keyframes lds-dual-ring {
    0% {
        transform: rotate(0deg);
    }

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

 <div class="overlay">
  <div id="loader1" class="lds-dual-ring"></div>
</div>