Notes

/* Container for the loader */
.loader-container {
position: relative;
width: 100%; /* Full width of the parent container or screen */
height: 150px; /* Height of the loader (can be adjusted) */
background-color: #ddd; /* Light gray background representing the skeleton */
overflow: hidden; /* Hides the content outside the container */
border-radius: 8px; /* Optional: rounded corners */
}

/* The loader element with the shimmer effect */
.loader {
position: absolute;
top: 0;
left: -100%; /* Start off-screen on the left */
width: 100%; /* Full width of the container */
height: 100%; /* Full height of the container */
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); /* Shimmer gradient */
animation: shimmer 2s infinite; /* Animation that moves the shimmer effect */
border-radius: 8px; /* Optional: rounded corners */
}

/* Keyframes for the shimmer animation */
@keyframes shimmer {
0% {
left: -100%; /* Start from left outside of the container */
}
50% {
left: 100%; /* Move to the right side of the container */
}
100% {
left: 100%; /* Keep it off the screen on the right */
}
}