Grokking CSS Design Patterns to Ace Interviews/

...

/

Problem: Shimmer Loading Placeholder

Problem: Shimmer Loading Placeholder

Try to create a loading placeholder card with a continuously moving shimmer effect using only CSS.

We'll cover the following...

Problem description

Given an HTML page containing a <div class="shimmer-card"></div> element, write CSS to:

  • Style .shimmer-card as a grey placeholder with fixed dimensions and relative positioning.

  • Use a ::before pseudo-element to overlay a linear-gradient shimmer: linear-gradient(90deg, transparent, ...