diff --git a/src/app.css b/src/app.css index 8bb2f33d..e1a2b342 100644 --- a/src/app.css +++ b/src/app.css @@ -154,6 +154,36 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) { padding-bottom: 80dvh !important; } +@keyframes indeterminate-bar { + 0% { + transform: translateX(-50%); + opacity: 0.25; + } + 50% { + opacity: 1; + } + 100% { + transform: translateX(50%); + opacity: 0.25; + } +} +.deck > header.loading:after { + pointer-events: none; + content: ''; + display: block; + height: 4px; + position: absolute; + bottom: 0; + width: 50%; + left: 25%; + background-image: radial-gradient( + ellipse farthest-side at bottom, + var(--link-color), + transparent + ); + animation: indeterminate-bar 1s ease-in-out infinite alternate; +} + .timeline { margin: 0 auto; padding: 0; diff --git a/src/components/timeline.jsx b/src/components/timeline.jsx index ab0c0100..48fc1b86 100644 --- a/src/components/timeline.jsx +++ b/src/components/timeline.jsx @@ -271,6 +271,7 @@ function Timeline({ loadItems(true); } }} + class={uiState === 'loading' ? 'loading' : ''} >