Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
May 9, 2020 05:51 am GMT

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


Original Link: https://dev.to/starbist/making-a-wait-widget-using-a-pseudo-element-and-css-step-animation-66k

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To