0

I recently created a loader but I do not know how to center it and put it in the middle of the screen. It is now in the top left of the screen when the page loads.

Here is a working snippet of my html and css.

@keyframes lds-blocks {
  0% {
    background: #e46e35;
  }
  12.5% {
    background: #e46e35;
  }
  12.625% {
    background: #242D3C;
  }
  100% {
    background: #242D3C;
  }
}
@-webkit-keyframes lds-blocks {
  0% {
    background: #e46e35;
  }
  12.5% {
    background: #e46e35;
  }
  12.625% {
    background: #242D3C;
  }
  100% {
    background: #242D3C;
  }
}
.lds-blocks {
  position: relative;
}
.lds-blocks div {
  position: absolute;
  width: 70px;
  height: 70px;
  background: #242D3C;
  -webkit-animation: lds-blocks 1s linear infinite;
  animation: lds-blocks 1s linear infinite;
}
.lds-blocks {
  width: 200px !important;
  height: 200px !important;
  -webkit-transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
  transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
}
<div class="lds-css ng-scope">
   <div class="lds-blocks" style="100%;height:100%">
      <div style="left:-7px;top:-7px;animation-delay:0s"></div>
      <div style="left:65px;top:-7px;animation-delay:0.125s"></div>
      <div style="left:137px;top:-7px;animation-delay:0.25s"></div>
      <div style="left:-7px;top:65px;animation-delay:0.875s"></div>
      <div style="left:137px;top:65px;animation-delay:0.375s"></div>
      <div style="left:-7px;top:137px;animation-delay:0.75s"></div>
      <div style="left:65px;top:137px;animation-delay:0.625s"></div>
      <div style="left:137px;top:137px;animation-delay:0.5s"></div>
   </div>
</div>

How can I center said loader?

Ahmad Maleki
  • 1,415
  • 3
  • 21
  • 35
Edgardo Ochoa
  • 3
  • 1

5 Answers5

1

Please check one of my preloaders here: https://codepen.io/animatedcreativity/pen/prXWaG

Please check my technique using absolute position, left & top (50%) & transform (-50%).

@keyframes lds-blocks {
  0% {
    background: #e46e35;
  }
  12.5% {
    background: #e46e35;
  }
  12.625% {
    background: #242D3C;
  }
  100% {
    background: #242D3C;
  }
}
@-webkit-keyframes lds-blocks {
  0% {
    background: #e46e35;
  }
  12.5% {
    background: #e46e35;
  }
  12.625% {
    background: #242D3C;
  }
  100% {
    background: #242D3C;
  }
}
.lds-blocks {
  position: relative;
}
.lds-blocks div {
  position: absolute;
  width: 70px;
  height: 70px;
  background: #242D3C;
  -webkit-animation: lds-blocks 1s linear infinite;
  animation: lds-blocks 1s linear infinite;
}
.lds-blocks {
  width: 200px !important;
  height: 200px !important;
  -webkit-transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
  transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
  
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}
<div class="lds-css ng-scope">
   <div class="lds-blocks" style="100%;height:100%">
      <div style="left:-7px;top:-7px;animation-delay:0s"></div>
      <div style="left:65px;top:-7px;animation-delay:0.125s"></div>
      <div style="left:137px;top:-7px;animation-delay:0.25s"></div>
      <div style="left:-7px;top:65px;animation-delay:0.875s"></div>
      <div style="left:137px;top:65px;animation-delay:0.375s"></div>
      <div style="left:-7px;top:137px;animation-delay:0.75s"></div>
      <div style="left:65px;top:137px;animation-delay:0.625s"></div>
      <div style="left:137px;top:137px;animation-delay:0.5s"></div>
   </div>
</div>
Rehmat
  • 2,121
  • 2
  • 24
  • 28
0

Wrap your loader via a div say .flex-center, So that it doesn't change your loader .lds-css. Like this:- 

<div class="flex-center">
<div class="lds-css ng-scope">
   <div class="lds-blocks" style="100%;height:100%">
      <div style="left:-7px;top:-7px;animation-delay:0s"></div>
      <div style="left:65px;top:-7px;animation-delay:0.125s"></div>
      <div style="left:137px;top:-7px;animation-delay:0.25s"></div>
      <div style="left:-7px;top:65px;animation-delay:0.875s"></div>
      <div style="left:137px;top:65px;animation-delay:0.375s"></div>
      <div style="left:-7px;top:137px;animation-delay:0.75s"></div>
      <div style="left:65px;top:137px;animation-delay:0.625s"></div>
      <div style="left:137px;top:137px;animation-delay:0.5s"></div>
   </div>
</div>
</div>

add CSS to this .flex-center like:- 

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
Yashwardhan Pauranik
  • 5,370
  • 5
  • 42
  • 65
0

Just add the following class to your css 

.lds-css {
  display: flex; 
  flex-direction: row;
  justify-content: center; 
  text-align: center
}

or you can try this 

.lds-css {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -100px;
}

I hope you mean this? https://jsfiddle.net/yxzL5w7o/

Alwaysblue
  • 9,948
  • 38
  • 121
  • 210
  • He want it vertically and horizontally center on screen, Your second trick will not make it. – Atul Rajput Dec 16 '18 at 07:33
  • In the second code snippet, The OP can change top 50% and left 50% change to achieve the desired result. Obviously he would need increase/decrease size of his loader component accordingly. jsfiddle was for the first code snippet. – Alwaysblue Dec 16 '18 at 12:09
0

Credit to: https://stackoverflow.com/a/33049392/2182349

html,
body {
  height: 100%;
}

.lds-css {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lds-blocks {
  max-width: 137px;
}

@keyframes lds-blocks {
  0% {
    background: #e46e35;
  }
  12.5% {
    background: #e46e35;
  }
  12.625% {
    background: #242D3C;
  }
  100% {
    background: #242D3C;
  }
}

@-webkit-keyframes lds-blocks {
  0% {
    background: #e46e35;
  }
  12.5% {
    background: #e46e35;
  }
  12.625% {
    background: #242D3C;
  }
  100% {
    background: #242D3C;
  }
}

.lds-blocks {
  position: relative;
}

.lds-blocks div {
  position: absolute;
  width: 70px;
  height: 70px;
  background: #242D3C;
  -webkit-animation: lds-blocks 1s linear infinite;
  animation: lds-blocks 1s linear infinite;
}

.lds-blocks {
  width: 200px !important;
  height: 200px !important;
  -webkit-transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
  transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
}
<div class="lds-css ng-scope">
  <div class="lds-blocks">
    <div style="left:-7px;top:-7px;animation-delay:0s"></div>
    <div style="left:65px;top:-7px;animation-delay:0.125s"></div>
    <div style="left:137px;top:-7px;animation-delay:0.25s"></div>
    <div style="left:-7px;top:65px;animation-delay:0.875s"></div>
    <div style="left:137px;top:65px;animation-delay:0.375s"></div>
    <div style="left:-7px;top:137px;animation-delay:0.75s"></div>
    <div style="left:65px;top:137px;animation-delay:0.625s"></div>
    <div style="left:137px;top:137px;animation-delay:0.5s"></div>
  </div>
</div>
user2182349
  • 9,569
  • 3
  • 29
  • 41
0

Just Add this css in your code and enjoy: the solutions with flex is also good, but it will not supported by all the browsers. 

.lds-css {position:fixed; left:50%; margin-left: -100px; top:50%; margin-top: -100px;}

here is the working example.

Atul Rajput
  • 4,073
  • 2
  • 12
  • 24