fix(dashboard): spinner animation polish and accessibility
Polish the working indicator animations: - Use cubic-bezier easing for smoother spinner rotation - Add will-change hints for GPU acceleration - Add display: inline-block to bounce-dot spans (required for transform) - Add prefers-reduced-motion media query to disable animations for motion-sensitive users (accessibility) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -84,7 +84,8 @@ body {
|
||||
border-radius: 50%;
|
||||
border: 1.5px solid transparent;
|
||||
border-top-color: currentColor;
|
||||
animation: spin-ring 0.8s linear infinite;
|
||||
will-change: transform;
|
||||
animation: spin-ring 0.9s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
|
||||
}
|
||||
|
||||
/* Working indicator at bottom of chat */
|
||||
@@ -93,10 +94,28 @@ body {
|
||||
40% { transform: translateY(-4px); }
|
||||
}
|
||||
|
||||
.working-dots span {
|
||||
display: inline-block;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.working-dots span:nth-child(1) { animation: bounce-dot 1.2s ease-in-out infinite; }
|
||||
.working-dots span:nth-child(2) { animation: bounce-dot 1.2s ease-in-out 0.15s infinite; }
|
||||
.working-dots span:nth-child(3) { animation: bounce-dot 1.2s ease-in-out 0.3s infinite; }
|
||||
|
||||
/* Accessibility: disable continuous animations for motion-sensitive users */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.spinner-dot::after {
|
||||
animation: none;
|
||||
}
|
||||
.working-dots span {
|
||||
animation: none;
|
||||
}
|
||||
.pulse-attention {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Glass panel effect */
|
||||
.glass-panel {
|
||||
backdrop-filter: blur(10px);
|
||||
|
||||
Reference in New Issue
Block a user