0

I make my firstspinner:

''''
#spinner-bg-loading{
  position: absolute;
  left: 50%;
  top: 25%;
  width: 80px;
  height: 80px;
  margin: -75px 0 0 -75px;
  border: 16px solid #FFFFFF;
  border-radius: 50%;
  border-top: 16px solid #1F3A51;
  animation: spin 2s linear infinite;
  z-index: 10000;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#spinner-bg {
  height: 100vw;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: none;
}

<div id="spinner-bg">
  <div class="container d-flex align-items-center">
    <div class="spinner-borderX" role="status">
      <span class="sr-only" id="spinner-bg-loading"></span>
    </div>
  </div>
</div>

''''

It's work fine, but i need small change.

The spinner currently displays 25% from the top. When I am at the bottom of the long page, the spinner is invisible (because it is at the top).

I need show it on user center screen, not to center website.

How can I fix it?

quatrol
  • 39
  • 4
  • Have you considered `position: fixed`? ([MDN Position documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/position)) – DBS Jul 10 '23 at 15:21
  • I can't see anything. It's a blank page. Did you miss anything? – Md. Rakibul Islam Jul 10 '23 at 15:27
  • Does this answer your question? [Flexbox: center horizontally and vertically](https://stackoverflow.com/questions/19026884/flexbox-center-horizontally-and-vertically) – Heretic Monkey Jul 10 '23 at 15:49

2 Answers2

2

The height of the containing element should be 100vh, not 100vw.

Then, you can set the top and left of the spinner itself to 50% and translate it back by -50% to get the actual center.

#spinner-bg-loading {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  /* other CSS properties... */
}
#spinner-bg {
  height: 100vh;
  /* ... */
}
Unmitigated
  • 76,500
  • 11
  • 62
  • 80
1

You set the spinner_bg height to 100vw, it should be 100vh, and also change the spinner top to 50%

Try This:

''''

#spinner-bg-loading{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 80px;
  height: 80px;
  margin: -75px 0 0 -75px;
  border: 16px solid #FFFFFF;
  border-radius: 50%;
  border-top: 16px solid #1F3A51;
  animation: spin 2s linear infinite;
  z-index: 10000;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#spinner-bg {
  height: 100vh;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: none;
}


<div id="spinner-bg">
  <div class="container d-flex align-items-center">
    <div class="spinner-borderX" role="status">
      <span class="sr-only" id="spinner-bg-loading"></span>
    </div>
  </div>
</div>
'''

here's a working Example: https://jsfiddle.net/wsnrfb6g/2/

Bruno
  • 655
  • 8
  • 18