Question

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

很明显，要使用Spinner，您需要编译React应用程序，因此我想说明问题的另一种方式是：是否存在Fabric Spinner的独立版本？

Answer 1

我认为您需要的是面料核心。

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应用加载时，如何显示微调框？

2 个答案: