DEV Community

Silvestar Bistrović
Silvestar Bistrović

Posted on

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...";
  }
}
Enter fullscreen mode Exit fullscreen mode

Latest comments (5)

Collapse
 
iamdejean profile image
Jean 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.

Collapse
 
oddward profile image
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

 
starbist profile image
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/....

Thread Thread
 
bendman profile image
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."

Collapse
 
starbist profile image
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.