前端UI组件跨平台【免费下载链接】quasarQuasar Framework - Build high-performance VueJS user interfaces in record time项目地址https://gitcode.com/gh_mirrors/qu/quasar点击查看免费下载Spinner加载指示器是 Quasar Framework 中用于向用户传达系统正在处理任务的关键 UX 组件涵盖 QSpinner 及 QSpinnerCube、QSpinnerBars、QSpinnerIos 等 22 个派生组件。本文以 docs/src/pages/vue-components/spinners.md 为骨架结合 ui/src/components/spinner 目录下的源码与测试完整讲解 Spinners 的 API、使用示例、颜色与尺寸控制、以及 v2.25 引入的无障碍最佳实践读完即可在业务中正确选用并配置任何一款加载动画。Spinners 是什么为什么加载指示器是必要 UX文档开篇即点明 Spinner 的核心定位用于向用户展示一个正在进行的、需要等待的过程。它是重要的用户体验特性——当系统执行耗时活动如从服务器拉取数据、进行重型计算时持续运转的动画让用户感到系统仍在正常工作而不是卡死。在 Quasar 生态中Spinners 并非孤立存在它与以下组件/插件搭配使用更为完整见原文档 related 声明Linear Progress 线性进度条Circular Progress 圆形进度条Skeleton 骨架屏Inner Loading 内部加载Loading 插件Loading Bar 插件其中 QInnerLoading、QBtn 的 loading 状态、QSelect 的加载遮罩等内部都直接复用了.q-spinner样式类例如 QBtn.sass 中的.q-icon, .q-spinner选择器可以说 Spinners 是 Quasar 全局加载视觉语言的基础单元。组件全家桶QSpinner 与 22 个派生 Spinner文档将 Spinner 家族分为两类QSpinner基础圆形加载动画Material 风格拥有独特的thickness线宽属性其他 Spinners22 个风格各异的派生动画其 API 与 QSpinner 一致但不含thickness属性文档以 QSpinnerCube 作为 API 代表进行说明。官方示例 Others.vue 中通过q-tooltip逐一标注了全部派生组件的名称完整清单如下组件标签对应组件视觉特征q-spinner-audioQSpinnerAudio音频均衡器跳动柱条q-spinner-ballQSpinnerBall弹性小球q-spinner-barsQSpinnerBars竖向柱条摆动q-spinner-boxQSpinnerBox四宫格方块缩放q-spinner-clockQSpinnerClock时钟指针旋转q-spinner-commentQSpinnerComment对话气泡q-spinner-cubeQSpinnerCube四角立方体缩放文档 API 代表q-spinner-dotsQSpinnerDots三点跳动q-spinner-facebookQSpinnerFacebookFacebook 风格三柱条q-spinner-gearsQSpinnerGears齿轮啮合转动q-spinner-gridQSpinnerGrid九宫格点阵q-spinner-heartsQSpinnerHearts跳动爱心q-spinner-hourglassQSpinnerHourglass沙漏q-spinner-infinityQSpinnerInfinity无限符号轨迹q-spinner-iosQSpinnerIosiOS 风格圆环q-spinner-orbitQSpinnerOrbit行星轨道q-spinner-ovalQSpinnerOval椭圆环q-spinner-pieQSpinnerPie扇形饼图q-spinner-puffQSpinnerPuff扩散圆点q-spinner-radioQSpinnerRadio收音机信号波纹q-spinner-ringsQSpinnerRings同心圆环q-spinner-tailQSpinnerTail拖尾圆环所有组件的源码文件均位于 ui/src/components/spinner每个组件都配套了同名.test.js单元测试。从源码看这些派生组件结构高度一致它们都是纯 SVG 动画通过innerHTML字符串内联animate/animateTransform元素实现动画效果如 QSpinnerCube.js 定义了四个带animateTransform缩放的方块QSpinnerAudio.js 定义了五根柱条的animate高度序列因此零外部依赖、体积极小且完全由 CSS 颜色驱动。统一的 Props 设计size 与 color从源码 spinner-utils.js 可以看到所有 Spinner 共享一组统一的基础 propsexport const useSpinnerProps { size: { type: [String, Number], default: 1em }, color: String }size尺寸控制类型String | Number默认值1em默认行为重要文档特别强调——默认情况下 QSpinner 及其他所有 Spinner 会继承父元素的 font-size 并将其用作自身尺寸。这源于默认值1em与源码中getSpinnerSize的实现逻辑spinner-utils.js当传入的值命中内置标准尺寸键时转换为像素否则原样透传可以是任意合法 CSS 尺寸字符串如100px、3em、5.5em标准尺寸快捷值xs18px、sm24px、md32px、lg38px、xl46px定义于 use-size.js。示例 StandardSizes.vue 展示了用v-for遍历这五个标准尺寸渲染 QSpinnerCube 的写法。单元测试 QSpinner.test.js 验证了size属性同时作用于 SVG 的width与height属性。color颜色控制类型String无默认值取值任意 Quasar 调色板颜色名primary、secondary、red、purple、indigo、teal等实现原理getSpinnerClassspinner-utils.js会将传入的 color 拼装为text-${color}工具类加载动画通过currentColor继承文字颜色。QSpinner 在 QSpinner.js 中给圆环设置了stroke: currentColor派生组件则普遍设置fill: currentColor。测试 QSpinner.test.js 验证了设置colorred后根 SVG 会获得text-red类。使用从最简示例到完整布局最基础的 QSpinner文档的 Default 示例Default.vue展示了 QSpinner 的基础用法与thickness属性的三种取值template div classq-pa-md div classq-gutter-md row q-spinner colorprimary size3em / q-spinner colorprimary size3em :thickness2 / q-spinner colorprimary size3em :thickness10 / /div /div /template三个 Spinner 尺寸均为3em但线条粗细依次为默认 5、2 与 10可直观看到圆环从纤细到粗壮的渐变。thickness 属性仅 QSpinner 独有thickness是 QSpinner 区别于其他派生 Spinner 的专属属性QSpinner.js类型Number默认值5作用设置圆环描边宽度对应 SVG 的stroke-width属性测试佐证QSpinner.test.js 验证了修改thickness会直接反映到圆环元素的stroke-width上。浏览全部派生 SpinnerOthers.vue 用q-gutter网格罗列了全部 22 个派生组件并为每个组件包裹了q-tooltip——文档提示将鼠标悬停在 Spinner 上即可看到它们的名字这是快速挑选动画样式的实用方式template div classq-pa-md q-gutter-xs div classq-gutter-md row justify-center div q-spinner-audio colorprimary size2em / q-tooltip :offset[0, 8]QSpinnerAudio/q-tooltip /div div q-spinner-ball colorprimary size2em / q-tooltip :offset[0, 8]QSpinnerBall/q-tooltip /div !-- 其余 20 个组件同理 -- /div /div /template配色实战一行代码切换品牌色文档的 Coloring 示例Color.vue在容器上设置了font-size: 2em作为统一尺寸基准然后为每个 Spinner 传入不同的 Quasar 颜色名template div classq-pa-md q-gutter-xs div classq-gutter-md row justify-center stylefont-size: 2em q-spinner-audio colorsecondary / q-spinner-ball colorred / q-spinner-bars colorpurple / q-spinner-box colordeep-orange / q-spinner-clock colorbrown / q-spinner-comment colordeep-purple / q-spinner-cube colorindigo / q-spinner-dots colorblue / q-spinner-facebook colorlight-blue / q-spinner-gears colorcyan / q-spinner-grid colorteal / q-spinner-hearts colorgreen / q-spinner-hourglass colorlight-green / q-spinner-infinity colorlime / q-spinner-ios coloryellow / q-spinner-orbit colorblue / q-spinner-oval coloramber / q-spinner-pie colororange / q-spinner-puff colordeep-orange / q-spinner-radio colorbrown / q-spinner-rings colorgrey / q-spinner-tail colorblue-grey / /div /div /template这个示例同时印证了两个设计要点其一color接受 Quasar 全量调色板其二不写size时 Spinner 会继承父容器font-size此处为 2em即继承字体大小作为尺寸的默认行为。尺寸控制从 em 继承到标准尺寸自由尺寸Size.vue 展示了四种自由尺寸的组合直接体现size接受任意 CSS 长度值template div classq-pa-md q-gutter-xs div classq-gutter-md row items-center q-spinner-comment colorsecondary size2em / q-spinner-radio colorred size3em / q-spinner-hourglass colorpurple size4em / q-spinner-cube colororange size5.5em / /div /div /template标准尺寸快捷值StandardSizes.vue 演示了五个内置尺寸键适合需要与兄弟组件尺寸对齐的场景template div classq-pa-md div classq-gutter-md row items-center q-spinner-cube v-forsize in [xs, sm, md, lg, xl] :keysize :sizesize colorprimary / /div /div /templatexs/sm/md/lg/xl分别映射 18/24/32/38/46pxuse-size.js由getSpinnerSize在渲染时完成换算。无障碍Accessibilityv2.25文档指出Spinners 渲染的是不带任何 ARIA 属性的裸 SVG 动画加载状态对屏幕阅读器完全不可见。这是 v2.25 起文档明确强调的实践要点包含两种推荐做法配合 live region 宣告加载状态为 Spinner 搭配一个rolestatus的容器内含视觉隐藏visually-hidden的Loading…文本让屏幕阅读器能够播报当前状态已有文字替代时标记隐藏如果页面上其他地方已经存在等价的文字说明如按钮文案加载中则应给 Spinner 自身标记aria-hiddentrue避免重复播报。从源码确认所有 Spinner 组件的渲染输出确实只有纯svg与内部动画元素见 QSpinner.js、QSpinnerCube.js组件本身未注入任何 ARIA 属性因此在接入无障碍改造时必须由使用方自行处理。底层实现一个值得注意的渲染优化除了上述 API 使用从源码还能发现 Spinner 在样式层面的两个实现细节QSpinner.sassvertical-align: middle保证 Spinner 与行内文本、图标垂直居中对齐content-visibility: autoSpinner 使用显式width/height的 SVG在离屏offscreen状态下可被浏览器跳过渲染从而优化包含大量加载动画页面的渲染性能该样式注释明确说明了这一意图。Material 风格圆环QSpinner 的.q-spinner-mat .path通过q-spin2s 线性旋转与q-mat-dash1.5s 缓动描边伸缩两组 keyframes 组合出经典的 Material 加载环效果。最佳实践小结异步请求/长任务优先在 QInnerLoading、QBtn 的loading属性或 Loading 插件中复用 Spinner保持全局视觉统一选型需要 Material 风格圆环用 QSpinner可调thickness需要品牌化趣味动效时从 22 个派生组件中挑选与场景语义匹配的款式如音频类任务用 QSpinnerAudio尺寸容器级布局用 em 继承保持响应式与图标/按钮对齐用标准尺寸键sm/md或明确像素值颜色通过 Quasar 调色板名实现主题统一无需额外 CSS无障碍始终为 Spinner 提供 live region 文字替代或在已有文本时标记aria-hiddentruev2.25 要求。相关 API 详情可在 spinners.md 中通过 DocApi 区块查看完整的可运行示例位于 docs/src/examples/QSpinner 目录单元测试覆盖见 ui/src/components/spinner 下各.test.js文件。赞分享前端UI组件跨平台【免费下载链接】quasarQuasar Framework - Build high-performance VueJS user interfaces in record time项目地址https://gitcode.com/gh_mirrors/qu/quasar点击查看免费下载相关推荐Quasar QAvatar 组件完全指南尺寸、字体、形状与无障碍实践Quasar QAvatar 组件完全指南尺寸、字体、形状与无障碍实践 QAvatar 是 Quasar Framework 中用于在圆形默认、方形或圆角前端UI组件跨平台Angular Material Badge 组件完全指南用法、定位、尺寸、可见性与无障碍实践Angular Material Badge 组件完全指南用法、定位、尺寸、可见性与无障碍实践 Badge徽章是 Angular Material 中用于前端UI组件设计系统Quasar QBanner 组件完全指南属性、插槽、无障碍与实践用法Quasar QBanner 组件完全指南属性、插槽、无障碍与实践用法 QBanner 是 Quasar Framework 内置的横幅Banner组件前端UI组件跨平台上一篇Fluxion攻击成功率提升指南5大关键因素与优化策略解析下一篇教育数据采集终极指南如何用Colly爬虫框架高效抓取在线课程信息创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考