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;
|
||
|
|
}
|
||
|
|
}
|