Shimmer Loading Effect
Smooth shimmer effect for skeleton loading screens
Code
.shimmer-container {
width: 300px;
height: 200px;
background: #f6f7f8;
background-image: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
background-repeat: no-repeat;
background-size: 800px 100%;
animation: shimmer 1.5s linear infinite;
border-radius: 8px;
}
@keyframes shimmer {
0% {
background-position: -400px 0;
}
100% {
background-position: 400px 0;
}
}HTML
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="shimmer-container"</span>></"attr-name"</span>>class</span>="tag"</span>>div</span>>