【免费下载链接】oatUltra-lightweight, zero dependency, semantic HTML, CSS, JS UI library. ~10KB mingz.项目地址https://gitcode.com/gh_mirrors/oat5/oat点击查看免费下载OatUltra-lightweight, zero dependency, semantic HTML/CSS/JS UI library是一款极轻量、零依赖、以语义化 HTML 为先的 UI 组件库。本文聚焦其 Spinner 组件讲解如何仅通过aria-busytrue与data-spinner属性在不引入任何 JavaScript 的前提下为任意元素附加加载指示器并掌握 small / large / overlay 三种形态的尺寸与覆盖层用法。读完本文你将能直接在按钮、卡片、表格等任何容器上挂载符合可访问性规范rolestatus的加载状态并理解其底层 CSS 原理与主题定制方式。组件定位把语义属性当作样式开关Oat 的设计哲学是「语义标签与属性开箱即用地被上下文化样式化无需类名」。Spinner 组件正是这一思想的典型代表它不像传统组件库那样要求你引入spinner标签或.spinner类而是把 HTML 标准状态属性aria-busy直接当作样式开关。div aria-busytrue/div这一行即可渲染出一个自转的加载圈。在 src/css/spinner.css 中选择器[aria-busytrue]通过::before伪元素生成指示器本体一个 1.5rem24px的圆形边框外圈使用var(--muted)底色、顶部使用var(--primary)强调色配合border-radius: var(--radius-full)9999px形成圆环并由spin 1s linear infinite动画驱动旋转。由于是通过伪元素绘制无需插入任何额外的 DOM 节点或图片资源。语义说明aria-busytrue本身即向屏幕阅读器宣告「该区域正在加载」Oat 在此之上叠加视觉反馈二者天然统一无需额外维护 ARIA 属性。基础用法三种尺寸尺寸通过data-spinnersmall|large控制不传属性则使用默认中等尺寸。完整示例见 spinner.mddiv classhstack stylegap: var(--space-8) div aria-busytrue>[data-spinner~small]::before { width: 1rem; height: 1rem; } [data-spinner~large]::before { width: 2rem; height: 2rem; border-width: 3px; }注意源码使用的是波浪号~空格分隔属性匹配这意味着data-spinner的值可以被空格拆分为多个标记为「组合形态」预留了能力——这正是下文 Overlay 模式可以写成data-spinnerlarge overlay的原因。按钮内的加载状态Spinner 作用于任意元素因此最常见的场景之一是把按钮置于加载态。如上面的示例所示给button同时加上aria-busytrue、data-spinnersmall和disabledbutton aria-busytrue>form onsubmitevent.preventDefault(); const b this.querySelector(button); b.setAttribute(aria-busy, true); b.disabled true button typesubmit>article classcard aria-busytrue>[data-spinner~overlay] { position: relative; * { opacity: 0.3; pointer-events: none; /* disable all elements in the container while its busy */ } ::before { position: absolute; inset: 0; margin: auto; z-index: 1; } }定位锚点给容器设置position: relative作为伪元素的定位基准禁用内容所有直接子元素降为 0.3 透明度并施加pointer-events: none——源码注释明确点明这相当于「在容器忙碌期间禁用其中所有元素」用户既看不清也无法点击底层内容交互上等价于模态遮罩居中指示器指示器伪元素改为position: absolute配合inset: 0; margin: auto实现水平垂直居中z-index: 1保证覆盖在内容之上。在官方演示页 demo.html 中「Performance」标签页就是一个aria-busytrue>赞分享【免费下载链接】oatUltra-lightweight, zero dependency, semantic HTML, CSS, JS UI library. ~10KB mingz.项目地址https://gitcode.com/gh_mirrors/oat5/oat点击查看免费下载相关推荐Fluent UI Suspense加载状态组件级别的加载指示器Fluent UI Suspense加载状态组件级别的加载指示器 在现代Web应用中用户对界面响应速度的要求越来越高。当应用加载数据或组件时一个精心设计的前端UI组件设计系统mdb-ui-kit加载状态组件化可复用的加载指示器设计mdb ui kit加载状态组件化可复用的加载指示器设计 加载状态组件化的价值 在Web应用开发中加载状态指示器是提升用户体验的关键元素。当用户进行数据提交前端UI组件Oat UI 骨架屏Skeleton组件详解基于 rolestatus 的语义化加载占位实现Oat UI 骨架屏Skeleton组件详解基于 rolestatus 的语义化加载占位实现 Oat 是一个极轻量、零依赖、语义化 HTML C上一篇OpenFlights免费开源的航班数据管理与可视化终极指南下一篇解决B站缓存视频无法播放难题m4s-converter工具的完整解决方案创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考