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 c = 2 * r * Math.PI
return (
<ProgressBar aria-label="Loading…" value={30}>
<ProgressBar aria-label="Loading..." value={30}>
{({ percentage }) => (
<svg
width={size}
height={size}
viewBox="0 0 28 28"
fill="none"
strokeWidth={strokeWidth}
<div
className={css({
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
})}
>
<circle
cx={center}
cy={center}
r={r}
strokeDasharray={0}
strokeDashoffset={0}
strokeLinecap="round"
<svg
width={size}
height={size}
viewBox="0 0 28 28"
fill="none"
strokeWidth={strokeWidth}
className={css({
stroke: variant == 'light' ? 'primary.100' : 'transparent',
'@media (prefers-reduced-motion: reduce)': {
display: 'none',
},
})}
style={{}}
/>
<circle
cx={center}
cy={center}
r={r}
strokeDasharray={`${c} ${c}`}
strokeDashoffset={percentage && c - (percentage / 100) * c}
strokeLinecap="round"
>
<circle
cx={center}
cy={center}
r={r}
strokeDasharray={0}
strokeDashoffset={0}
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({
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',
transition: 'transform 16ms linear',
}}
/>
</svg>
>
⏳
</span>
</div>
)}
</ProgressBar>
)