cube-ui Loading 加载组件：12 条 spinner 动画的实现原理与自定义尺寸实战

前端UI组件移动开发【免费下载链接】cube-ui:large_orange_diamond: A fantastic mobile ui lib implement by Vue项目地址https://gitcode.com/gh_mirrors/cu/cube-ui点击查看免费下载Loading是 cube-ui 提供的基础加载反馈组件用于在页面请求、异步任务进行中向用户展示一个可自定义大小的加载动画。本文将以 document/components/docs/zh-CN/loading.md 为核心完整讲解cube-loading的使用方式、size属性配置并结合 loading.vue 源码与 loading.spec.js 测试用例剖析其 12 条 spinner 旋转动画的实现原理与注册机制帮助读者在项目里正确使用并深度理解这一基础组件。一、组件定位与适用场景在 cube-ui 的组件体系中Loading与Button、Tip、Toolbar等同属于基础basic组件类别在 src/index.js 中被列入全局组件列表随Vue.use(Cube)一并注册。它最典型的应用场景包括页面首屏加载、下拉刷新等待过程异步请求发出后、数据返回前的占位反馈表单提交、图片上传等耗时操作的进行中提示作为Toast加载类型type: loading的内部核心元素详见后文。cube-loading的设计非常轻量它只负责渲染一段纯 CSS 动画不携带任何文案、蒙层或按钮因此非常适合被组合进各类业务容器中。二、基础使用默认 24px 的加载动画按照 loading.md 的说明Loading组件“提供了可自定义大小的加载动画”。直接在模板中写入cube-loading/cube-loading即可渲染cube-loading/cube-loading cube-loading :size28/cube-loading cube-loading :size40/cube-loading第一行使用默认大小24px后两行通过size属性分别指定为28px与40px注意:size是v-bind绑定数字而不是字符串28。在官方示例页 example/pages/loading.vue 中同样以这三种写法演示了不同尺寸下的加载动画效果。若组件是全局注册的此模板开箱即用无需额外引入。Props 配置一览| 参数 | 说明 | 类型 | 默认值 | | - | - | - | - | | size | 加载图标的大小单位 px | Number | 24 |从源码角度看size的默认值 24 其实由两处共同保证组件计算属性 style 会在传入size时把它转成${size}px分别赋给 spinner 容器的width与height当不传size时style直接返回undefined此时容器的尺寸退回样式表默认值width: 1em; height: 1em而.cube-loading的font-size取自 Stylus 变量$fontsize-large-xxx其定义恰为24px见 var/size.styl。也就是说24px 的默认尺寸是“1em 24px”这一设计带来的结果。这一行为也被单元测试显式验证在 loading.spec.js 中未传size时断言.cube-loading-spinners的内联style.width为空字符串传入size: 30时则断言内联宽度为30px。三、源码解析12 条 spinner 的旋转动画是如何实现的cube-loading的动画没有依赖任何第三方库全部由模板循环 Stylus 生成div classcube-loading span classcube-loading-spinners :stylestyle i classcube-loading-spinner v-foritem in balde/i /span /div数据字段balde: 12loading.vue控制v-for渲染出12 个i classcube-loading-spinner容器.cube-loading-spinners负责承载尺寸width/height由style计算属性动态注入每个 spinner 都是绝对定位的小圆条围绕容器中心旋转。Stylus 循环生成每条 spinner 的位姿在 loading.vue 的样式段中通过 Stylus 的for num in (1..12)循环为第num条 spinner 生成独立的动画参数.cube-loading-spinner position: absolute left: 44.5% top: 37% width: 2PX // for rem height: 25% border-radius: 50%/20% opacity: .25 background-color: currentColor animation: spinner-fade 1s linear infinite for num in (1..12) :nth-child({num}) animation-delay: ((num - 1) / 12)s transform: rotate(30deg * (num - 6)) translateY(-150%)关键点解读rotate(30deg * (num - 6))12 条 spinner 以 30° 为步长360° / 12均匀分布在圆周上translateY(-150%)把每条 spinner 从圆心向外推移形成“表盘刻度”式的放射布局animation-delay: ((num - 1) / 12)s相邻 spinner 的动画启动时间依次延迟 1/12 秒从而形成 12 个圆点依次“淡入淡出”的经典加载效果background-color: currentColorspinner 颜色跟随color继承业务方可通过设置父元素color轻松改变加载动画的颜色width: 2PX使用大写PX单位是为了避免与 rem 换算插件冲突保证在移动端适配下依然呈现清晰的 2px 圆条。spinner-fade 关键帧动画keyframes spinner-fade 0% opacity: .85 50% opacity: .25 100% opacity: .25动画spinner-fade以1 秒为周期、linear缓动、无限循环前 50% 时间内透明度从 0.85 衰减到 0.25后 50% 维持低透明度等待下一轮循环。由于 12 条 spinner 的animation-delay相互错开视觉上始终有一条“亮点”在圆环上顺时针滚动。四、注册机制全局安装与按需引入Loading组件的注册逻辑位于 src/modules/loading/index.jsimport Loading from ../../components/loading/loading.vue Loading.install function (Vue) { Vue.component(Loading.name, Loading) } export default Loading组件内部通过name: cube-loadingloading.vue声明了注册名称因此Vue.use(Loading)后即可在任意模板中使用cube-loading。对应地test/unit/specs/loading.spec.js 验证了Vue.use(Loading)之后Vue.component(Loading.name)被正确注册为函数组件。在完整引入 cube-ui 时src/index.js 的install会遍历全部组件并调用各自的install(Vue)其中就包含Loading无需单独处理。按需使用时可以仿照lib/loading/目录下的产物lib/loading/index.js 与 lib/loading/loading.min.js单独引入组件与样式。另外Vue 生态工具也能识别该组件vetur/tags.json与vetur/attributes.json中登记了cube-loading的标签与属性描述使用 Vetur 插件的编辑器可获得对应的智能提示。五、组合应用Toast 加载态的内核cube-loading不仅是独立组件还被上层反馈组件复用。在 src/components/toast/toast.vue 中cube-loading v-ifisLoading/cube-loading当Toast的type为loading这也是 Toast 的默认类型见 toast.vue时Toast 内部直接渲染cube-loading作为加载动画并在其外层叠加弹层与文字提示。这意味着掌握Loading的尺寸与颜色表现同样适用于定制Toast加载提示的视觉反馈。这种“基础动画组件 弹层组件组合”的架构正是 cube-ui 组件可复用设计的典型体现。六、类型支持与测试保障TypeScript 类型types/components/Loading.d.ts 声明了CubeLoading组件及其size?: number属性类型化项目可直接获得属性校验单元测试test/unit/specs/loading.spec.js 覆盖了三类行为全局注册是否生效、不传size时容器无内联尺寸、传入size: 30时容器内联宽度精确为30px。这两者共同保证了cube-loading的尺寸行为在后续版本迭代中保持稳定开发者可以放心依赖其默认 24px、按需缩放的设计契约。七、小结cube-loading是 cube-ui 中一个“麻雀虽小、五脏俱全”的基础组件对外只暴露size一个 Props使用成本极低对内则以 12 条通过 Stylus 循环生成的 spinner 配合spinner-fade关键帧实现了轻量、无依赖、颜色随currentColor继承的加载动画。理解其“1em 24px”的默认尺寸来源、v-for balde: 12的渲染方式与size内联样式注入逻辑之后无论是日常使用、按需引入还是基于 Toast 组合二次定制都能做到心中有数。赞分享前端UI组件移动开发【免费下载链接】cube-ui:large_orange_diamond: A fantastic mobile ui lib implement by Vue项目地址https://gitcode.com/gh_mirrors/cu/cube-ui点击查看免费下载相关推荐gpui-kit Spinner 组件完整指南旋转加载动画的配置、尺寸与动画原理gpui kit Spinner 组件完整指南旋转加载动画的配置、尺寸与动画原理 导读 Spinner 是 gpui kit基于 GPUI 的跨平台桌面 G桌面应用UI组件前端Vant Loading 加载组件完全指南类型、尺寸、颜色与自定义图标实战Vant Loading 加载组件完全指南类型、尺寸、颜色与自定义图标实战 导读 Loading 是 Vant 移动端组件库中用于展示加载中过渡状态的轻量前端UI组件daisyUI Loading 组件完全指南6 种加载动画、5 档尺寸与源码级原理解析daisyUI Loading 组件完全指南6 种加载动画、5 档尺寸与源码级原理解析 Loading加载组件是 daisyUI 提供的一组纯 CSS 加前端UI组件上一篇GPU显存健康检测用memtest_vulkan彻底告别游戏崩溃与AI训练中断下一篇toBeBetterJavaer消息可靠性事务消息创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考