feat(ui): add Spinner component with orbital animation

- Create new Spinner component with three orbiting dots
- Use inline CSS keyframes for reliable animation
- Support multiple size variants (xs, sm, md, lg, xl)
- Increase spinner sizes in loading states across the app
- Add biome-ignore directives for pre-existing lint issues
- Fix accessibility: change span onClick to button element

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Ajax Davis 2025-12-11 07:47:32 +10:00
parent 89c0d552f6
commit 1e58537a65
7 changed files with 268 additions and 163 deletions

View file

@ -165,6 +165,19 @@ export default {
'0%, 100%': { opacity: '0.4' },
'50%': { opacity: '0.6' },
},
orbit: {
'0%': {
transform: 'rotate(0deg) translateX(150%) rotate(0deg)',
opacity: '1',
},
'50%': {
opacity: '0.6',
},
'100%': {
transform: 'rotate(360deg) translateX(150%) rotate(-360deg)',
opacity: '1',
},
},
},
animation: {
@ -177,6 +190,7 @@ export default {
shimmer: 'shimmer 2s infinite linear',
pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
'grid-pulse': 'grid-pulse 8s ease-in-out infinite',
orbit: 'orbit 1.2s ease-in-out infinite',
},
},
},