Как показать Spinner во время загрузки моего приложения React? - PullRequest
Новая
       37

Как показать Spinner во время загрузки моего приложения React?

0 голосов
/ 06 ноября 2018

Можно ли показать Spinner , пока загружается моя надстройка Word (реагирует на приложение)?

Очевидно, что для использования Spinner вам нужно скомпилировать приложение React, поэтому я думаю, что еще один способ сформулировать вопрос: есть ли отдельная версия Spinner из ткани?

Ответы [ 2 ]

0 голосов
/ 06 ноября 2018

Поскольку React еще не загружен, я бы лично в <div id="root"> добавил рекомендуемый CSS / HTML. Когда компоненты React загружаются (загружаются), они автоматически заменяют «корневое» содержимое.

Например: 

<body>
  <noscript>
     You need to enable JavaScript to run this app.
  </noscript>
  <div id="root">
    <style>
        #loader {
            background-color: #f2f2f2;
            display: flex;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        .spinner {
            border-radius: 50%;
            width: 5em;
            height: 5em;
            margin: 60px auto;
            font-size: 10px;
            position: relative;
            border-top: 0.5em solid rgb(199, 224, 244);
            border-right: 0.5em solid rgb(199, 224, 244);
            border-bottom: 0.5em solid rgb(199, 224, 244);
            border-left: 0.5em solid rgb(0, 120, 212);
            -webkit-transform: translateZ(0);
            -ms-transform: translateZ(0);
            transform: translateZ(0);
            -webkit-animation: load8 1.1s infinite linear;
            animation: load8 1.1s infinite linear;
        }

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

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

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

            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
    </style>
    <div id="loader">
        <div class="spinner"></div>
    </div>
  </div>

Ваш index.tsx будет просто: 

ReactDOM.render(
  <App />,
  document.getElementById('root') as HTMLElement
);
0 голосов
/ 06 ноября 2018

Я думаю, что вам нужно тканевое ядро.

https://developer.microsoft.com/en-us/fabric#/get-started#core

https://github.com/OfficeDev/office-ui-fabric-core

Если его там нет, то нет отдельного счетчика, и вам нужно открыть вопрос по ним.

...