studio/meet
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

♿️(frontend) add reduced-motion spinner fallback

Browse Source 
show an hourglass when animations are reduced
This commit is contained in:
Cyril
2026-01-30 10:54:17 +01:00
committed by aleb_the_flash
parent 44362eca23
commit 27f2023104
1 changed files with 58 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
src/frontend/src/primitives/Spinner.tsx
View File

@@ -13,44 +13,70 @@ export const Spinner = ({
const r = 14 - strokeWidth const r = 14 - strokeWidth
const c = 2 * r * Math.PI const c = 2 * r * Math.PI
return ( return (
<ProgressBar aria-label="Loading…" value={30}> <ProgressBar aria-label="Loading..." value={30}>
{({ percentage }) => ( {({ percentage }) => (
<svg <div
width={size} className={css({
height={size} display: 'inline-flex',
viewBox="0 0 28 28" alignItems: 'center',
fill="none" justifyContent: 'center',
strokeWidth={strokeWidth} })}
> >
<circle <svg
cx={center} width={size}
cy={center} height={size}
r={r} viewBox="0 0 28 28"
strokeDasharray={0} fill="none"
strokeDashoffset={0} strokeWidth={strokeWidth}
strokeLinecap="round"
className={css({ className={css({
stroke: variant == 'light' ? 'primary.100' : 'transparent', '@media (prefers-reduced-motion: reduce)': {
display: 'none',
},
})} })}
style={{}} >
/> <circle
<circle cx={center}
cx={center} cy={center}
cy={center} r={r}
r={r} strokeDasharray={0}
strokeDasharray={`${c} ${c}`} strokeDashoffset={0}
strokeDashoffset={percentage && c - (percentage / 100) * c} strokeLinecap="round"
strokeLinecap="round" className={css({
stroke: variant == 'light' ? 'primary.100' : 'transparent',
})}
style={{}}
/>
<circle
cx={center}
cy={center}
r={r}
strokeDasharray={`${c} ${c}`}
strokeDashoffset={percentage && c - (percentage / 100) * c}
strokeLinecap="round"
className={css({
stroke: variant == 'light' ? 'primary.800' : 'white',
})}
style={{
animation: `rotate 1s ease-in-out infinite`,
transformOrigin: 'center',
transition: 'transform 16ms linear',
}}
/>
</svg>
<span
aria-hidden="true"
className={css({ className={css({
stroke: variant == 'light' ? 'primary.800' : 'white', display: 'none',
color: variant == 'light' ? 'primary.800' : 'white',
fontSize: 'sm',
'@media (prefers-reduced-motion: reduce)': {
display: 'inline',
},
})} })}
style={{ >
animation: `rotate 1s ease-in-out infinite`, ⏳
transformOrigin: 'center', </span>
transition: 'transform 16ms linear', </div>
}}
/>
</svg>
)} )}
</ProgressBar> </ProgressBar>
) )