Center CSS loader [duplicate]

Question

Center CSS loader [duplicate]

Navigation

#1 by (3 votes)

0

I'm doing a CSS loader, I want it to be right in the middle of the screen both horizontally and vertically but I can not.

.loader{
  border: 16px solid #d4d4d4;
  border-top: 16px solid #3498db;
  border-bottom: 16px solid #3498db;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 1.5s linear infinite;
  position: fixed;
  left : 50%;
  bottom : 0;
  right : 0;
  top : 50%;
}

.loader-background {
    min-width: 100vw;
    min-height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    width: 100vw;
    height: 100vh;
    position: absolute;
    background-color: #eaeaea4a;
    z-index: 9999;
}

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

<div class="loader-background"><div class="loader"></div></div>

I tried to move them with the properties left,bottom,right,top But I do not get the effect, and it gets out of sync when the screen is mobile.

Any suggestions of favor?

css3 css

asked by Alberto Siurob 24.09.2018 в 19:17

source

1 answer

compare two dates in php Convert a date format to Java

score 3 · Accepted Answer

you can try the following:

body, html {
  width: 100%;
  height: 100%;
  min-height: 100vh;
}

.loader-background {
    width: 100%;
    height: 100%;
    position: relative; /* Cambiamos de absolute a relative */
    background-color: #eaeaea4a;
    z-index: 9999;
}

.loader{
  border: 16px solid #d4d4d4;
  border-top: 16px solid #3498db;
  border-bottom: 16px solid #3498db;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 1.5s linear infinite;
  position: absolute; /* cambiamos de fixed a absolute */
  /* Ponemos el valor de left, bottom, right y top en 0 */
  left: 0;
  bottom: 0; 
  right: 0; 
  top: 0; 
  margin: auto; /* Centramos vertical y horizontalmente */
}

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

<div class="loader-background">
  <div class="loader"></div>
</div>