CSS Проблема с двумя предзагрузчиками - PullRequest
Новая
       15

CSS Проблема с двумя предзагрузчиками

0 голосов
/ 09 марта 2020

Мне нужен предварительный загрузчик mutliple. Один на теле, и теперь я хочу добавить еще один preloader перед отображением формы. Вот мой первый preloader: 

<body>
<div id="preloader">
        <div id="status">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 74.4 81.9" width="300"
                 height="300" xml:space="preserve">
                <linearGradient id="fill" x1="0.5" y1="1" x2="0.5" y2="0">
                    <stop offset="0%" stop-color="#76B442">
                        <animate attributeName="stop-color" values="#76B442; #A7A8AA; #76B442" dur="1s"
                                 repeatCount="indefinite"></animate>
                    </stop>

                    <stop offset="100%" stop-color="#A7A8AA">
                        <animate attributeName="stop-color" values="#A7A8AA; #76B442; #A7A8AA" dur="1s"
                                 repeatCount="indefinite"></animate>
                    </stop>
                </linearGradient>
                <path fill="url(#fill)" d="M1.9,79.4c-1.5-1.5,0.3-4.7,8.2-14.2c4.8-5.7,10.1-12.3,11.9-14.6l3.3-4.1l-1.6-1.7
                        c-7.2-7.4-8.6-20.6-3-29.7C27.9,3.4,43.8-1.4,56.8,4.2c6,2.6,11.8,8,14.4,13.5c2.7,5.6,2.5,15.4-0.4,21.1
                        c-6.6,13-22.8,18.9-36.3,13.3c-2.2-1-4.1-1.3-4.4-1c-0.3,0.4-5.8,7-12.2,14.8C8.8,76.8,5.7,80,4.3,80C3.3,80,2.1,79.7,1.9,79.4
                        L1.9,79.4z M53.5,48.8c5.7-2,10.7-6.3,13.4-11.3c2.8-5.2,2.9-13.8,0.1-18.9c-4.5-8.4-12-12.8-21.9-12.8c-26.3,0-33.2,33.2-9,42.7
                        C42.2,50.9,47.3,51,53.5,48.8L53.5,48.8z"></path>
                </svg>
        </div>
    </div>
.
.
.
</body>

Мой второй preloader: 

<div id="preloader_form">
    <div id="status_form">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 74.4 81.9" width="300"
         height="300" xml:space="preserve">
        <linearGradient id="fill" x1="0.5" y1="1" x2="0.5" y2="0">
            <stop offset="0%" stop-color="#76B442">
                <animate attributeName="stop-color" values="#76B442; #A7A8AA; #76B442" dur="1s"
                         repeatCount="indefinite"></animate>
            </stop>

            <stop offset="100%" stop-color="#A7A8AA">
                <animate attributeName="stop-color" values="#A7A8AA; #76B442; #A7A8AA" dur="1s"
                         repeatCount="indefinite"></animate>
            </stop>
        </linearGradient>
        <path fill="url(#fill)" d="M1.9,79.4c-1.5-1.5,0.3-4.7,8.2-14.2c4.8-5.7,10.1-12.3,11.9-14.6l3.3-4.1l-1.6-1.7
                c-7.2-7.4-8.6-20.6-3-29.7C27.9,3.4,43.8-1.4,56.8,4.2c6,2.6,11.8,8,14.4,13.5c2.7,5.6,2.5,15.4-0.4,21.1
                c-6.6,13-22.8,18.9-36.3,13.3c-2.2-1-4.1-1.3-4.4-1c-0.3,0.4-5.8,7-12.2,14.8C8.8,76.8,5.7,80,4.3,80C3.3,80,2.1,79.7,1.9,79.4
                L1.9,79.4z M53.5,48.8c5.7-2,10.7-6.3,13.4-11.3c2.8-5.2,2.9-13.8,0.1-18.9c-4.5-8.4-12-12.8-21.9-12.8c-26.3,0-33.2,33.2-9,42.7
                C42.2,50.9,47.3,51,53.5,48.8L53.5,48.8z"></path>
    </svg>
    </div>
</div>
<form>.......

Вот CSS для обоих preloader: 

#preloader{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    z-index: 120;
}

#preloader_form {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    z-index: 110;
}

#status,
#status_form {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 0;
    position: absolute;
    top: 50%;
}

Я не сделал Нет проблем с первым прелоадером. Но SVG второго исчезнет, ​​когда исчезнет первый загрузчик. И я не понимаю, почему

Есть идеи?

Спасибо

...