0

I have created a loader using loader.io and integrated the css and HTML in the angular application but my loader is not displayed on the center of the screen with backdrop as it should.

@keyframes spin {
    0% { transform: rotate(0deg) }
    50% { transform: rotate(180deg) }
    100% { transform: rotate(360deg) }
  }
  .loader div {
    position: absolute;
    animation: spin 3.77s linear infinite;
    width: 113.08px;
    height: 113.08px;
    top: 71.96px;
    left: 71.96px;
    border-radius: 50%;
    box-shadow: 0 4.6259999999999994px 0 0 #20c997;
    transform-origin: 56.54px 58.852999999999994px;
  }
  .loader-container {
    width: 257px;
    height: 257px;
    display: inline-block;
    overflow: hidden;
    background: blue;
  }
  .loader {
    width: 100%;
    height: 100%;
    position: relative;
    transform: translateZ(0) scale(1);
    backface-visibility: hidden;
    transform-origin: 0 0; /* see note above */
  }
  .loader div { box-sizing: content-box; }
<div *ngIf="true" class="loader-container">
    <div class="loader">
        <div></div>
    </div>
</div>

I want to bring the loader to the center.

Sato Takeru
  • 1,669
  • 4
  • 12
  • 27
Ajinkya Gadgil
  • 117
  • 1
  • 8
  • have you tried searching : ' position element in center of page css ' ? use position fixed and some `left: 50%` , `top:50%` , `transform: translate(-50%,-50%)` on your loader – Mihai T Jan 21 '21 at 11:48
  • Start with `.loader {position: fixed; width: 100vw; height: 100vh;}` than follow the above comment - you will fix it. – skobaljic Jan 21 '21 at 11:56
  • I'd use flexbox to center, Lots of info on SO https://stackoverflow.com/questions/19026884/flexbox-center-horizontally-and-vertically – Darren Street Jan 21 '21 at 12:11
  • I got it to the center I also need to add overlay class to it so the background becomes darker. How can it be achieved? I am pretty novice in css – Ajinkya Gadgil Jan 21 '21 at 12:28

2 Answers2

1

.loader div {

   position: absolute;
   animation: spin 3.77s linear infinite;
   width: 113.08px;
   height: 113.08px;
   top: 50%;
   left: 50%;
   border-radius: 50%;
   box-shadow: 0 4.6259999999999994px 0 0 #20c997;
   transform: translate(-50%, -50%);
}
Arif matubber
  • 21
  • 5
0
<!DOCTYPE html>  
<html>  
<head>
<body>
<div class="centered">
<div *ngIf="true" class="loader-container">
<div class="loader">
<div></div>
</div>
</div>
</div>

<style>
  .centered {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform: -webkit-translate(-50%, -50%);
    transform: -moz-translate(-50%, -50%);
    transform: -ms-translate(-50%, -50%);
    color:darkred;
  }
  
@keyframes spin {
    0% { transform: rotate(0deg) }
    50% { transform: rotate(180deg) }
    100% { transform: rotate(360deg) }
  }

  .loader div {
    position: absolute;
    animation: spin 3.77s linear infinite;
    width: 113.08px;
    height: 113.08px;
    top: 71.96px;
    left: 71.96px;
    border-radius: 50%;
    box-shadow: 0 4.6259999999999994px 0 0 #20c997;
    transform-origin: 56.54px 58.852999999999994px;
  }

  .loader-container {
    width: 257px;
    height: 257px;
    display: inline-block;
    overflow: hidden;
    background: blue;
  }

  .loader {
    width: 100%;
    height: 100%;
    position: relative;
    transform: translateZ(0) scale(1);
    backface-visibility: hidden;
    transform-origin: 0 0; /* see note above */
  }

  .loader div { box-sizing: content-box; }
</style>

</body>  
</html>