Name: Making a wait widget using a pseudo-element and CSS Step Animation
Rating: 3.4 (7581 reviews)
Author: starbist

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

Silvestar Bistrović - May 9 '20 -

- Dev Community

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