juanatsap
c1f2f89555
Implements smooth skeleton loader animations during language switching: - Uses HTMX's built-in .htmx-swapping class (no hyperscript needed) - Content fades to 30% opacity during swap - Shimmer animation overlays content during transition - Respects prefers-reduced-motion accessibility setting - Total transition: 500ms (250ms fade-out + 250ms fade-in) Implementation approach: - Simple CSS-only solution using ::before pseudo-element - No overlay div - skeleton appears INSIDE content wrappers - Works automatically with HTMX swap timing already configured - GPU-accelerated shimmer animation (background-position) Files changed: - static/css/skeleton.css (NEW) - Shimmer animation styles - templates/index.html - Added skeleton.css reference
65 lines
1.6 KiB
CSS
65 lines
1.6 KiB
CSS
/**
|
|
* Skeleton Loader for Language Transitions
|
|
* ==========================================
|
|
* Simple skeleton animation shown during HTMX content swaps
|
|
* Uses HTMX's built-in .htmx-swapping class
|
|
*/
|
|
|
|
/* ========================================================================
|
|
CONTENT FADE & SKELETON TRANSITION
|
|
======================================================================== */
|
|
|
|
/* Fade out content when HTMX starts swapping */
|
|
.cv-page-content-wrapper.htmx-swapping {
|
|
opacity: 0.3;
|
|
transition: opacity 250ms ease;
|
|
position: relative;
|
|
}
|
|
|
|
/* Skeleton overlay appears during swap */
|
|
.cv-page-content-wrapper.htmx-swapping::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background:
|
|
linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
|
|
background-size: 200% 100%;
|
|
animation: skeleton-shimmer 1.5s ease-in-out infinite;
|
|
border-radius: 4px;
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
}
|
|
|
|
@keyframes skeleton-shimmer {
|
|
0% {
|
|
background-position: 200% 0;
|
|
}
|
|
100% {
|
|
background-position: -200% 0;
|
|
}
|
|
}
|
|
|
|
/* Fade in new content */
|
|
.cv-page-content-wrapper.htmx-settling {
|
|
opacity: 1;
|
|
transition: opacity 250ms ease;
|
|
}
|
|
|
|
/* ========================================================================
|
|
ACCESSIBILITY
|
|
======================================================================== */
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.cv-page-content-wrapper.htmx-swapping::before {
|
|
animation: none;
|
|
background: #e8e8e8;
|
|
}
|
|
|
|
.cv-page-content-wrapper {
|
|
transition: none !important;
|
|
}
|
|
}
|