CODEWITHSUNDEEP
htmlcssangulargif
Alan Chan
Alan Chan

Reputation: 3

How to set a spinner into the middle of the screen while loading with CSS?

My spinner is in the middle of the screen after a second of loading the page. But at the first frame of the page, it is not centered, instead it is positioned on the top-left of the page. How to make sure my spinner is centered from the start? I do not have problems centering the loader. I just need to make sure my spinner starts in the middle of the page. I already looked for similar problems but they are not the same. Here is my css.

.loader {
  /*left: 50%;
  position: fixed;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  z-index: 999;*/
   position: fixed;
   z-index: 999;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
}

html:

<div class="loader">
    <img src="../../../../assets/content/Amsa-loading.gif">

  </div>

Upvotes: 0

Views: 10204

Answers (2)

Yogesh Devgun
Yogesh Devgun

Reputation: 1557

Try 

<div class="app_loader"></div>

.app_loader{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Upvotes: 6

imvain2
imvain2

Reputation: 15847

What I do to make this work is use a background instead of img tag:

.loader{
     height:100%;
     width:100%;
     background:url(/design/images/loader.gif) no-repeat center center;
     position:absolute;
     z-index:10;
}

then for the HTML:

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

then in my site's CSS, hide the div when the CSS is loaded.

.loader{display:none;}

Upvotes: 1

Related Questions