DEV Community

loading...

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

starbist profile image Silvestar Bistrović ・1 min read

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

Discussion

pic
Editor guide
starbist profile image
Silvestar Bistrović Author

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ć Author

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.

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

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.