vinzenz/hyperhive
vinzenz/hyperhive
Watch
0
0
Fork
You've already forked hyperhive
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

dashboard: revise rebuild spinner — transparent ring, single rotating arc (#804 follow-up)

Browse source 
PR #807 fix (faint amber full ring + brighter top arc) still reads
as 'a border around the icon, with a brighter top' rather than as
a loading spinner — mara reports it's still broken.

This iteration drops the full ring entirely. The ::after now has
transparent borders on three sides plus a bright amber top arc, so
only the rotating arc itself is visible — no static ring frame
around the icon. Same shape every desktop OS uses for circular
progress indicators (Material, Apple's spinner, etc.).

Other tweaks:
- 3px stroke (was 2px) so the arc carries enough visual weight
- inset: -5px + border-radius: 11px to keep the arc hugging the
  icon's 6px-radius square at the new stroke width
- 0.9s rotation period (was 1s) — slightly snappier read

Same DOM, same .pending-running class trigger; pure CSS swap.
This commit is contained in:
iris 2026-05-31 17:56:30 +02:00 • committed by mara
commit 6d7ec90843
1 changed files with 14 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

26
frontend/packages/dashboard/src/dashboard.css
View file

@ -326,15 +326,17 @@ a:hover {
border-color: var(--amber);
background: rgba(250, 179, 135, 0.05);
}
/* The spinner is a faint amber ring with one brighter arc on top
that rotates around the icon — classic CSS spinner shape. The
previous version coloured two adjacent border sides amber, which
rendered as a rotating L-corner ("_|") rather than a smooth
orbiting arc (mara on #804). Faint-ring + bright-arc reads
unambiguously as a loading spinner.
/* The spinner is a single rotating arc — a transparent ring with
only the top side coloured amber. As it rotates, the visible arc
sweeps around the icon like a classic loading indicator. Earlier
shapes (two-adjacent-sides → L-corner; faint-ring + bright-arc →
reads as a static border) didn't read unambiguously as a spinner
— this one has no full ring, only the moving arc.
Override the icon's overflow:hidden so the ring can sit just
outside the square; it composes naturally with the mauve
The 3px stroke + thicker rounded radius gives the arc enough
visual weight that it doesn't disappear at typical viewport
sizes. Override the icon's overflow:hidden so the ring can sit
just outside the square; it composes naturally with the mauve
selected-ring (selected + running shows both). */
@keyframes container-icon-spin {
from { transform: rotate(0deg); }
@ -346,11 +348,11 @@ a:hover {
.container-row.pending-running > .container-icon::after {
content: '';
position: absolute;
inset: -4px;
border-radius: 10px;
border: 2px solid rgba(250, 179, 135, 0.2);
inset: -5px;
border-radius: 11px;
border: 3px solid transparent;
border-top-color: var(--amber);
animation: container-icon-spin 1s linear infinite;
animation: container-icon-spin 0.9s linear infinite;
pointer-events: none;
}
.container-row .head {