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

Discussion

markdown guide
 

Cool! Can you do an analysis on CSS infinite though., I've never seen it.

 

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.

 

Can it be used anywhere else? E.g. width and height?

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

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.