This is the CSS class I created for my Loader:
.loading{
color:black;
position:fixed;
width: 270px;
height:100px;
font-size:20px;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
transition: 1s ease-out;
opacity:1;
}
.loading:after {
overflow: hidden;
display: inline-block;
vertical-align: bottom;
animation: ellipsis steps(4,end) 900ms infinite;
content: "\2026"; /* ascii code for the ellipsis character */
width: 0px;
}
@keyframes ellipsis {
to {
width: 20px;
}
}
@-webkit-keyframes ellipsis {
to {
width: 20px;
}
}
.centered{
vertical-align:middle;
text-align:center;
align-items: center;
justify-content: center;
}
Here's how I use it:
<div class="loading centered">
Loading your results
</div>
You can observe in this example that the dots are causing the entire label to shift to the left. What adjustments should I make to remedy this issue?