I've been struggling to create a loading screen with no luck.
The animation itself looks fine, but the background is causing issues. Every time I try to adjust the opacity, it affects the text as well.
@import url('https://fonts.googleapis.com/css?family=PT+Sans+Narrow');
.yes
{
background:black ;
}
.loading {
font-family: PT Sans Narrow;
font-weight: bold;
font-size: 30px;
color:black;
top: 45%;
left: 45%;
position: absolute;
color:white !important;
}
.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: "....";
width: 0px;
}
@keyframes ellipsis {
to {
width: 0.9em;
}
}
@-webkit-keyframes ellipsis {
to {
width: 1em;
}
}
<body class="yes">
<p class=" loading ">Loading</p>
</body>