Description
I propose adding a suite of "Skeleton Loading" utility classes. This will allow developers to quickly mock up the layout of their data cards or profiles with animated, pulsating placeholders while waiting for actual data (e.g., from an API) to load.
The implementation will feature two distinct pure CSS animation variants:
Pulse: A soft, breathing opacity change.
Shimmer: A dynamic, sweeping gradient that moves continuously across the elements to simulate active loading.
Why is this useful for EaseMotion CSS?
Modern web applications heavily rely on Skeleton loaders to improve perceived performance during network requests. By providing native .ease-skeleton classes, EaseMotion CSS gives developers a plug-and-play solution to create beautiful loading states that automatically match the framework's existing border-radius and color token systems, without needing external libraries.
HTML Snippet
html
CSS Snippet
css
/* Base Skeleton Shape */
.ease-skeleton {
background-color: var(--ease-color-neutral-200);
border-radius: var(--ease-radius-md);
/* Default Pulse Animation */
animation: easeSkeletonPulse 1.5s ease-in-out infinite alternate;
}
/* Base Pulse Keyframes */
@Keyframes easeSkeletonPulse {
0% { opacity: 0.6; }
100% { opacity: 1; }
}
/* Specific Shapes */
.ease-skeleton-text {
height: 1rem;
width: 100%;
}
.ease-skeleton-circle {
border-radius: 50%;
}
.ease-skeleton-btn {
height: 2.5rem;
width: 100px;
border-radius: var(--ease-radius-full);
}
/*
* Advanced Shimmer Effect (Sweep Animation)
* Uses a linear gradient and animates the background position.
*/
.ease-skeleton-shimmer .ease-skeleton,
.ease-skeleton.ease-skeleton-shimmer {
/* Disable the pulse */
animation: none;
/* Create the sweeping gradient */
background: linear-gradient(
90deg,
var(--ease-color-neutral-200) 25%,
var(--ease-color-neutral-100) 50%,
var(--ease-color-neutral-200) 75%
);
/* Stretch background to allow sweeping */
background-size: 400% 100%;
/* Trigger the sweep animation /
animation: easeSkeletonShimmer 1.5s infinite linear;
}
@Keyframes easeSkeletonShimmer {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
/ Dark Mode Overrides */
@media (prefers-color-scheme: dark) {
.ease-skeleton {
background-color: var(--ease-color-neutral-700);
}
.ease-skeleton-shimmer .ease-skeleton,
.ease-skeleton.ease-skeleton-shimmer {
background: linear-gradient(
90deg,
var(--ease-color-neutral-700) 25%,
var(--ease-color-neutral-600) 50%,
var(--ease-color-neutral-700) 75%
);
background-size: 400% 100%;
}
}
Visual Reference (optional)
N/A
Checklist
I have read the
CONTRIBUTING.md
document.
I have checked for existing issues proposing the same feature.
I understand that my proposed class names or structure may be modified by the maintainer.
Description
I propose adding a suite of "Skeleton Loading" utility classes. This will allow developers to quickly mock up the layout of their data cards or profiles with animated, pulsating placeholders while waiting for actual data (e.g., from an API) to load.
The implementation will feature two distinct pure CSS animation variants:
Pulse: A soft, breathing opacity change.
Shimmer: A dynamic, sweeping gradient that moves continuously across the elements to simulate active loading.
Why is this useful for EaseMotion CSS?
Modern web applications heavily rely on Skeleton loaders to improve perceived performance during network requests. By providing native .ease-skeleton classes, EaseMotion CSS gives developers a plug-and-play solution to create beautiful loading states that automatically match the framework's existing border-radius and color token systems, without needing external libraries.
HTML Snippet
html
/* Create the sweeping gradient */
background: linear-gradient(
90deg,
var(--ease-color-neutral-200) 25%,
var(--ease-color-neutral-100) 50%,
var(--ease-color-neutral-200) 75%
);
/* Stretch background to allow sweeping */
background-size: 400% 100%;
/* Trigger the sweep animation /
animation: easeSkeletonShimmer 1.5s infinite linear;
}
@Keyframes easeSkeletonShimmer {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
/ Dark Mode Overrides */
@media (prefers-color-scheme: dark) {
.ease-skeleton {
background-color: var(--ease-color-neutral-700);
}
.ease-skeleton-shimmer .ease-skeleton,
.ease-skeleton.ease-skeleton-shimmer {
background: linear-gradient(
90deg,
var(--ease-color-neutral-700) 25%,
var(--ease-color-neutral-600) 50%,
var(--ease-color-neutral-700) 75%
);
background-size: 400% 100%;
}
}
Visual Reference (optional)
N/A
Checklist
I have read the
CONTRIBUTING.md
document.
I have checked for existing issues proposing the same feature.
I understand that my proposed class names or structure may be modified by the maintainer.