javascript - CSS Loading animation on whole page with opacity

This is CSS animation which i want to use. Here is what i got:

.img {
 width:300px;
 height:100%;
}
.loading {
 content ="Loading";
  background-color: black;
  color: white;
  opacity: 0.5;
  font-family: PT Sans Narrow;

  font-size: 30px;
   top: 45%;
   left: 45%;
   
  position: absolute;
}

.loading:after {
  
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
  -webkit-animation: ellipsis steps(5,end) 1000ms infinite;      
  animation: ellipsis steps(5,end) 1000ms infinite;
  content: "\2026\2026"; /* ascii code for the ellipsis character */
  width: 0px;
}

@keyframes ellipsis {
  to {
    width: 1.15em;    
  }
}

@-webkit-keyframes ellipsis {
  to {
    width: 1.5em;    
  }
}

<html>
<div class="loading">Loading</div>

<img src=".png" class="img"></img>
<img src=".png" class="img"></img>
<img src=".png" class="img"></img>
<img src=".png" class="img"></img>
</html>

This is CSS animation which i want to use. Here is what i got:

.img {
 width:300px;
 height:100%;
}
.loading {
 content ="Loading";
  background-color: black;
  color: white;
  opacity: 0.5;
  font-family: PT Sans Narrow;

  font-size: 30px;
   top: 45%;
   left: 45%;
   
  position: absolute;
}

.loading:after {
  
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
  -webkit-animation: ellipsis steps(5,end) 1000ms infinite;      
  animation: ellipsis steps(5,end) 1000ms infinite;
  content: "\2026\2026"; /* ascii code for the ellipsis character */
  width: 0px;
}

@keyframes ellipsis {
  to {
    width: 1.15em;    
  }
}

@-webkit-keyframes ellipsis {
  to {
    width: 1.5em;    
  }
}

<html>
<div class="loading">Loading</div>

<img src="http://i.imgur./iQUErgs.png" class="img"></img>
<img src="http://i.imgur./iQUErgs.png" class="img"></img>
<img src="http://i.imgur./iQUErgs.png" class="img"></img>
<img src="http://i.imgur./iQUErgs.png" class="img"></img>
</html>

Currently background is not covered while images are loading and it is a goal. I tried using content property but it is not really working out for me.

What i am trying to achive is loading screen with centered text when all images are loading and screen covered in transparent grey/black.

I need loading screen when images are actually loading.

Share Improve this question asked Jul 31, 2017 at 23:41 AESTHETICS 1,0492 gold badges15 silver badges33 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 4

I have added the follow to your code in .loading:

  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

position: fixed allows the element to float in view while scrolling. top and left align the fixed element to the top left corner. To align the text to the center I used flex. Read more on flexbox here. align-items: center vertically aligns all elements in a flexbox elements. justify-content: center does the same, except horizontally.

.img {
 width:300px;
 height:100%;
}
.loading {
  content ="Loading";
  background-color: black;
  color: white;
  opacity: 0.5;
  font-family: PT Sans Narrow;

  font-size: 30px;
   
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading:after {
  
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
  -webkit-animation: ellipsis steps(5,end) 1000ms infinite;      
  animation: ellipsis steps(5,end) 1000ms infinite;
  content: "\2026\2026"; /* ascii code for the ellipsis character */
  width: 0px;
}

@keyframes ellipsis {
  to {
    width: 1.15em;    
  }
}

@-webkit-keyframes ellipsis {
  to {
    width: 1.5em;    
  }
}

<html>
<div class="loading">Loading</div>

<img src="http://i.imgur./iQUErgs.png" class="img"></img>
<img src="http://i.imgur./iQUErgs.png" class="img"></img>
<img src="http://i.imgur./iQUErgs.png" class="img"></img>
<img src="http://i.imgur./iQUErgs.png" class="img"></img>
</html>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - CSS Loading animation on whole page with opacity - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)