在 UI 的中心显示 Spinner

Question

如何在页面中央显示微调器，并且在显示微调器时页面中的所有内容都变得模糊？

Answer 1

你可以只使用CSS，这里是一个例子：https://codepen.io/mohamedhmansour/pen/qJggma

基本上确保你的 html 和 body 最大化:

html {
  height: 100%;
}

body {
  background-color: #eee;
  height: inherit;
  margin: 0;
}

并且包裹微调器的 div 应该使内容居中。使用 flexbox:

#loader {
  display: flex;
  justify-content: center;
  align-items: center;
  height: inherit;
  background-color: white;
}

最后你的组件如下：

let { Spinner, SpinnerSize } = window.Fabric;

ReactDOM.render((
  <Spinner size={SpinnerSize.large} />
), document.getElementById('loader'));

同样适用于 CSS-in-JS。

Show Spinner at the center of UI