Show Spinner at the center of UI

Question

How will show a spinner at the center of the page and all the contents in the page gets blurred while showing the spinner?

Answer 1

You can just use CSS, here is an example: https://codepen.io/mohamedhmansour/pen/qJggma

Basically make sure your html and body are maximized:

html {
  height: 100%;
}

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

And the div that wraps the spinner should center the contents. Use flexbox:

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

And finally your component is just the following:

let { Spinner, SpinnerSize } = window.Fabric;

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

Same thing applies with CSS-in-JS.