mirror of
https://github.com/bilawalsidhu/gods-eye-view.git
synced 2026-11-05 19:04:02 +00:00
Show a spinner by the time while play waits on data
Play holds while a layer loads the frame for its time, and the bar's only sign of it was a faint pulse, so a stopped handle read as a stall. The bubble now shows a small spinner beside the time while play is held. It comes on once a hold lasts long enough to notice and stays through a run of slow frames, so neither a quick frame nor the gaps between frames flash it.
This commit is contained in:
1 parent
287c881c17
commit
4fc9722356
3 files changed
+73
-9
No files matched your search
@@ -106,21 +106,32 @@ body.cockpit-mode #world-timeline {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Playing, held while a layer loads the time's data. */
|
||||
#world-timeline .world-timeline-time.is-buffering {
|
||||
animation: world-timeline-buffering 1s ease-in-out infinite alternate;
|
||||
/* Playing, held while a layer loads the time's data: a spinner by the time. */
|
||||
#world-timeline .world-timeline-time.is-waiting {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
@keyframes world-timeline-buffering {
|
||||
#world-timeline .world-timeline-spinner {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border: 2px solid rgba(255, 255, 255, 0.2);
|
||||
border-top-color: var(--accent);
|
||||
border-radius: 50%;
|
||||
animation: world-timeline-spin 0.9s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes world-timeline-spin {
|
||||
to {
|
||||
opacity: 0.45;
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
#world-timeline .world-timeline-time.is-buffering {
|
||||
#world-timeline .world-timeline-spinner {
|
||||
animation: none;
|
||||
opacity: 0.6;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in new issue
Block a user