Sidhant Panda's answer is pretty spot on here, however, I would like to elaborate on the concept of how it works.
The loading cards are basically white cards, with a bunch of elements that have a gradient background. Now, the trick is to move the background-position on these elements to give it that nice and smooth loading effect.
Here's some sample code to create something similar:
Markup
<div class="card">
<div class="loading"></div>
<div class="loading"></div>
</div>
Card Styles
.card {
background: #FFFFFF;
padding: 16px;
}
.loading {
padding: 8px;
margin: 0 0 4px;
background: linear-gradient(90deg, rgba(207, 216, 220, .15), rgba(207, 216, 220, .35), rgba(207, 216, 220, .15));
animation: loadanimation 1.4s ease infinite;
}
As you would've noticed, the loading rows have a gradient background. If we change this background position, it would appear as if something is moving. We just have to make sure that the timing is right and the movement doesn't feel jittery.
Here's the animation code to do that:
Animation
@keyframes loadanimation {
0% {
background-position: 0 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0 50%
}
}
Hope it helps! 🙂
Extra: Here's a similar question that was asked a while ago, which actually inspired us to make these loading cards on hashnode.