Shimmer Loading Placeholder
Explore how to implement a shimmer loading placeholder using CSS. Learn to style a fixed-size grey placeholder and apply a continuous animated linear-gradient shimmer effect with pseudo-elements. This lesson helps you master CSS animations for loading states, enhancing UI responsiveness without JavaScript.
We'll cover the following...
We'll cover the following...
Problem description
Given an HTML page containing a <div class="shimmer-card"></div> element, write CSS to:
Style
.shimmer-cardas a grey placeholder with fixed dimensions and relative positioning.Use a
::beforepseudo-element to overlay a linear-gradient shimmer:linear-gradient(90deg, transparent,...