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 AESTHETICSAESTHETICS 1,0492 gold badges15 silver badges33 bronze badges1 Answer
Reset to default 4I 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>发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745377455a4625065.html
评论列表（0条）