-- 在移动设备上旋转,桌面端静止 --> 可访问性建议 考虑用户的动画偏好: <!-- 尊重用户的减少动画设置 --> 提供关闭动画的选项: <!-- 内容 --> 最佳实践 动画时长选择 过渡效果:150ms - 300ms 复杂动画:300ms - 500ms 页面切换:500ms - 800ms 动画触发时机 用户交互响应 状态变化提示 内容加载过程...
disabled> <svg class="animate-spin motion-reduce:hidden ..." viewBox="0 0 24 24"><!-- ... --></svg> Processing...Tailwind also includes a motion-safe variant that only adds styles when the user has not requested reduced motion. This can be useful when using the motion-reduce help...
export const Loading = () => { return ( <svg className="animate-spin -ml-1 mr-3 h-10 w-10 text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stro...
class="mx-2 -ml-2 inline-block h-4 w-4 animate-spin text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"16 changes: 8 additions & 8 deletions 16 frontend/src/views/ResourcesView.vue Original file line numberDiff line numberDiff line change ...