Как показать загрузчик / спиннер полной страницы перед загрузкой React App fini sh - PullRequest
Новая
       4

Как показать загрузчик / спиннер полной страницы перед загрузкой React App fini sh

0 голосов
/ 25 февраля 2020

Как сделать загрузчик / спиннер полной страницы, который будет загружаться первым, а затем будет отображаться до тех пор, пока приложение React (или другой каркас на основе JS) не загрузится полностью.

Под «полной загрузкой» я имею в виду момент, когда вращатель браузера перестает вращаться.

Я делал эти загрузчики / вращатели для не-1009 * визуализированных веб-сайтов, но я не уверен, как сделать их для JS -представленных приложений.

Как мне узнать, когда root div заполнен полностью загруженным приложением React?

1 Ответ

1 голос
/ 26 февраля 2020

Вы можете поместить знак загрузки в index.html внутри div, который предоставляется любому SPA (обычно root или app). Это будет отменено, как только будет загружено полное приложение. Например, поместите следующий стиль внутри тега head index.html. 

<style>
    .loading {
        display: inline-block;
        width: 30px;
        height: 30px;
        border: 2px solid rgba(0,0,0,.2 );
        border-radius: 50%;
        border-top-color: rgba(0,0,0,.4 );
        animation: spin 1s ease-in-out infinite;
        -webkit-animation: spin 1s ease-in-out infinite;
        left: calc(50%);
        top: calc(50%);
        position: fixed;
        z-index: 1;
        }

        @keyframes spin {
        to { -webkit-transform: rotate(360deg); }
        }
        @-webkit-keyframes spin {
        to { -webkit-transform: rotate(360deg); }
        }
</style>

и поместите следующий тег внутри тега body. 

<body>
    <noscript>
        You need to enable JavaScript to run this app.
    </noscript>
    <div id="app">
        <div class="loading"></div>
    </div>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...