Here's my approach to making a wait widget:
- using a pseudo-element after,
- using keyframes for animation,
- using steps for changing states,
- using
infinite
to make a loop, - using
content
to change the animation text.
Here's the code:
.waiting {
position: relative;
&:after {
content: "Waiting.";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(255,255,255,.75);
color: Tomato;
animation: waiting 3s steps(3, end) infinite;
}
}
@keyframes waiting {
33% {
content: "Waiting..";
}
66% {
content: "Waiting...";
}
}