Question 204792 in Html Question posted in
Some basic documentation can be found here.

Html – Center Spinner on user center screen

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?

Tags:

2

Answers


  1. 0

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

    Try This:

    <style>

#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: block;
}
</style>

<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>
    Login or Signup to reply.
  2. 0

    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;
  /* ... */
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search