如何在我的 React 应用程序加载时显示 Spinner？

Question

是否可以在加载我的 Word 加载项（React 应用程序）时显示 Spinner？

显然，要使用 Spinner，您需要编译 React 应用程序，所以我想另一种陈述问题的方式是：是否有独立版本的 fabric Spinner？

Answer 1

我觉得你需要的是fabric core

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

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

如果不存在，则没有独立的微调器，您需要根据它们打开一个问题。

Answer 2

由于React还没有加载，我个人会在<div id="root">里面添加推荐的CSS/HTML。一旦 React 组件被加载（下载），它会自动替换 "root" 内容。

例如：

<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
);

如何在我的 React 应用程序加载时显示 Spinner？

How do I show a Spinner while my React app is loading?

office-js

office-ui-fabric