Harry Harry - 1 month ago 8
Sass (Sass) Question

How to show spinner or loading on the screen completely

Im from Mobile background. In Android applications we do show a spinner dialog to avoid user interaction while there is a network activity. I believe we can do the same using css, with the following css I can see the spinner on the screen, but I want to avoid any user interaction on the screen while showing the spinner.

.spinner {
position: fixed;
z-index: 999;
height: 5em;
width: 5em;
overflow: show;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
}


Can anyone please help me.

Thanks
enter image description here

Answer

Use the following layout in HTML:

<div class="overlay">
    <div class="overlay__wrapper">
        <div class="overlay__spinner"></div>
    </div>
</div>

For the overlay, set it to:

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0,0,0,.7);
}

Inside, have a wrapper so that you can center the spinner.

.overlay__wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}

Then for the spinner, add this CSS:

.overlay__spinner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

Add your spinner-code inside .overlay__spinner. This will result in a semi-transparent overlay with a centered spinner in it.

Comments