Shimmer

Loading source...

It’s such a beautiful animation. Technically Win32 did it way before it was cool with their loading bars.

This is done by using the ::after psuedo-element to overlay the exact same text on top of the element via the content property. The text content to overlay is passed to the CSS via a data-text data attribute.

Turns out you can reference the value of a HTML attribute inside of CSS using the attr() function.

From there, we just apply some nice looking linear gradient angled at 90 degrees with sufficient contrast to the background, and use background-clip: text to clip it such that it only shows within the text characters. Then we animate the gradient with some keyframes that animate background-position left to right like this

@keyframes shimmer {
  from {
    background-position: -125px 0;
  }
  to {
    background-position: calc(100% + 125px) 0;
  }
}

Note that it starts at -125px and finishes at 125px. The 125px value comes from the size of the background we set on the element. This ensures the animation plays through to the entire text, leaves the view, and comes out the other side again.