Making a wait widget using a pseudo-element and CSS Step Animation

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...";
  }
}

Comments

[Silvestar Bistrović]

infinite could be only used with animations. However, you could use animation with a vast number of properties. Beware that animating some properties like width and height 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/....

[Ben Duncan]

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."

[Silvestar Bistrović]

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.

[Mugtaba G]

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

[Japheth Ezekiel]

To get different variations of this animation you can play with duration, timing functions delays and also the positions of the 'waiting.' text.