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...";
}
}
Oldest comments (5)
Do you want to know what does
infinite
mean? It runs your animation infinitely.It could be quite powerful in combination with
animation-direction: alternate-reverse;
(example1: codepen.io/CiTA/pen/aXRyWp, examples: codepen.io/CiTA/pen/MWYZBMX).I hope this helps.
infinite
could be only used with animations. However, you could use animation with a vast number of properties. Beware that animating some properties likewidth
andheight
could affect the performance of your interface as it triggers a lot of rendering processes and calculations. Read more about it here: html5rocks.com/en/tutorials/speed/....It can be used on any animation, but it doesn't mean infinite height or width. It means "keep running the animation an infinite number of times."
Nice, very simple & direct 👌🏾
Gives me an idea for a loading screen (after I figure out how to implement one lol) - revealing a nice message to the user over a few seconds
To get different variations of this animation you can play with duration, timing functions delays and also the positions of the 'waiting.' text.