CODEWITHSUNDEEP
cssangularsass
MaheshGupta
MaheshGupta

Reputation: 153

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

Upvotes: 1

Views: 6124

Answers (1)

NikxDa
NikxDa

Reputation: 4187

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.

Upvotes: 4

Related Questions