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

fix(#804): spinner arc needs border-radius: 50% to travel a circle

Browse source 
The ::after spinner ring used border-radius: 11px on a ~90px element,
making it a rounded rectangle. The amber arc swept around a rectangular
path, reading as a spinning border side. border-radius: 50% makes it a
true circle and the arc sweeps smoothly like a classic loading spinner.
This commit is contained in:
iris 2026-05-31 21:41:57 +02:00 • committed by mara
commit 65f385a7a0
1 changed files with 10 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -326,17 +326,16 @@ a:hover {
border-color: var(--amber);
background: rgba(250, 179, 135, 0.05);
}
/* 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.
/* The spinner is a circular arc — a transparent ring with only the
top side coloured amber (border-top-color). As it rotates, the
visible arc sweeps around the icon like a classic loading indicator.
border-radius: 50% is required for the arc to travel a circle;
an earlier shape used border-radius: 11px which made the ring a
rounded rectangle, so the arc swept a rectangular path and read as
a spinning border side rather than a spinner.
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
The 3px stroke and overflow:visible override let the ring sit just
outside the square icon; it composes naturally with the mauve
selected-ring (selected + running shows both). */
@keyframes container-icon-spin {
from { transform: rotate(0deg); }
@ -349,7 +348,7 @@ a:hover {
content: '';
position: absolute;
inset: -5px;
border-radius: 11px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: var(--amber);
animation: container-icon-spin 0.9s linear infinite;