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