DEV Community

Silvestar Bistrović
Silvestar Bistrović

Posted on

6 1

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

Top comments (5)

 
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.

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

Image of AssemblyAI

Automatic Speech Recognition with AssemblyAI

Experience near-human accuracy, low-latency performance, and advanced Speech AI capabilities with AssemblyAI's Speech-to-Text API. Sign up today and get $50 in API credit. No credit card required.

Try the API

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay