前端UI组件设计系统【免费下载链接】ant-design-blazor基于 Ant Design 与 Blazor 的前端组件库。让开发者解放生产力实现更大价值。项目地址https://gitcode.com/ant-design-blazor/ant-design-blazor点击查看免费下载当页面局部正在等待异步数据或处于渲染过程中时一个合适的加载动效能够有效缓解用户等待的焦虑。Ant Design Blazor 的Spin加载中组件正是为此而生——它既是独立展示的加载指示器也可以作为包裹容器将现有内容整体置为加载状态。阅读本文后你将掌握 Spin 组件的基本用法、尺寸与嵌套模式、延迟防抖机制以及如何通过Indicator参数接入自定义加载指示符。基本用法一个简单的 loading 状态Spin组件最基本的使用方式极为简洁——仅需一个空标签即可输出默认的旋转加载动画。这在 Ant Design Blazor 官方文档的 basic.md基本用法中被定义为一个简单的 loading 状态。Spin /对应官方文档站点的演示代码见 Basic.razor只有一行没有任何附加参数。此时Spin会以简单模式Simple渲染组件自身不包含子内容ChildContent为空仅输出加载指示符本身。从源码层面看Spin.razor默认指示符是一组四个圆点ant-spin-dotspan classant-spin-dot ant-spin-dot-spin i classant-spin-dot-item/i i classant-spin-dot-item/i i classant-spin-dot-item/i i classant-spin-dot-item/i /span四个ant-spin-dot-item圆点分布在四方通过 CSS 动画antSpinMove透明度变化与antRotate旋转组合形成经典旋转加载效果动画节奏依次延迟 0.4s/0.8s/1.2s具体见 components/spin/style/index.less。渲染逻辑与参数驱动Spin组件的渲染由两个模板分支决定Spin.razorSimple 模式ChildContent为null时直接渲染指示符嵌套模式存在ChildContent时外层包裹ant-spin-container容器指示符与内容并存。是否加载由内部状态_isLoading控制其初始值直接取自Spinning参数默认为true见 Spin.razor.cs。加载状态下指示符元素获得ant-spin-spinning类变为可见opacity: 1内容容器获得ant-spin-blur类内容呈半透明模糊态并禁用交互pointer-events: none。API 参数详解Spin 组件的全部公开参数定义在 Spin.razor.cs官方文档index.zh-CN.md整理如下参数说明类型默认值Delay延迟显示加载效果的时间防止闪烁int毫秒0Indicator加载指示符自定义显示内容RenderFragment-使用默认圆点Size组件大小可选Small/Default/LargeSpinSizeSpinSize.DefaultSpinning是否为加载中状态booltrueTip当作为包裹元素时可自定义描述文案stringnullWrapperClassName包装器的类属性string-与 React 版本不同Blazor 版本的Size使用强类型枚举SpinSize定义于 SpinSize.cs包含Small、Default、Large三个值在 Razor 中直接写作SizeSpinSize.Small即可编译期即可发现拼写错误。尺寸映射与样式实现不同尺寸对应不同 CSS 类与圆点大小Size值CSS 类圆点尺寸SpinSize.Smallant-spin-sm14px点 6pxSpinSize.Default无额外类20px点 9pxSpinSize.Largeant-spin-lg32px点 14px类映射逻辑在 Spin.razor.cs 的SetClass()中通过ClassMapper动态组装圆点尺寸变量spin-dot-size-sm/ - /-lg定义于 components/style/themes/default.less可通过主题变量定制。各种大小按场景选尺寸官方文档size.md给出了明确的选型建议Small用于文本加载场景Default用于卡片容器级加载Large用于页面级加载。div Spin SizeSpinSize.Small / Spin / Spin SizeSpinSize.Large / /div对应演示代码见 Size.razor。示例中还给 Spin 添加了ant-spin-spinning样式使三个加载器横向排布展示实际业务中 Spin 默认以内联块inline-block方式显示。嵌套模式将现有内容整体置为加载状态Spin最实用的能力是直接内嵌内容把现有容器整体变为加载状态官方文档 nested.md可以直接把内容内嵌到 Spin 中将现有容器变为加载状态。div Spin Spinningloading Alert MessageAlert message title DescriptionFurther details about the context of this alert. TypeAlertType.Info / /Spin div stylemargin-top: 16px Loading state Switch Checkedloading OnChangetoggle / /div /div code { bool loading false; void toggle(bool value) loading value; }演示源码见 Nested.razor。要点子内容以ChildContent传入Spinning参数控制加载态加载中时内容容器自动获得ant-spin-blur类Spin.razor.cs实现半透明模糊遮罩pointer-events: none阻止用户与内容交互结合Switch组件动态切换loading即可模拟异步数据加载的完整交互。容器用法与 WrapperClassName若只是想把 Spin 放进某个已有容器如居中的卡片可直接将 Spin 作为容器子元素官方文档 inside.md 展示了这一场景div classexample Spin / /div完整演示见 Inside.razor。当 Spin 包裹内容嵌套模式时外层div会带上ant-spin-nested-loading包装类此时可通过WrapperClassName参数附加自定义类该参数在SetClass()中通过WrapperClassMapper.If(...)条件追加Spin.razor.cs。自定义描述文案Tip当 Spin 作为包裹元素使用时Tip参数可在指示符下方显示一行描述文字Spin TipLoading... Alert MessageAlert message title DescriptionFurther details about the context of this alert. TypeAlertType.Info / /Spin演示见 Tip.razor。渲染时Tip 文本输出到ant-spin-text元素Spin.razor同时组件会追加ant-spin-show-text类使文案显示Spin.razor.cs。样式中show-text的布局位置圆点与文字的间距调整见 index.less。延迟加载Delay防止闪烁当异步操作极快时loading 一闪而过会造成视觉闪烁。Delay参数用于延迟加载效果的出现若Spinning状态在 delay 时间内结束则不显示 loading 状态官方文档 delayAndDebounce.md。Spin Spinningloading Delay500 Alert MessageAlert message title DescriptionFurther details about the context of this alert. TypeAlertType.Info / /Spin code { bool loading false; void toggle(bool value) loading value; }演示见 DelayAndDebounce.razor。其底层实现Spin.razor.cs值得展开OnInitialized()中当Delay 0时创建一个System.Timers.TimerOnParametersSet()中检测_isLoading ! Spinning时重启计时器保证每次状态翻转都重新计满 delay 时长计时器Elapsed触发DelayElapsed此时才将_isLoading更新为Spinning并调用StateHasChanged()刷新 UIDispose(bool)中调用_delayTimer?.Dispose()释放计时器资源。这意味着延迟同时具备防闪烁与防抖双重语义短促的状态翻转在 delay 结束前被合并loading 根本不会渲染。默认Delay 0不启用设置为如500毫秒即可获得平滑体验。自定义指示符IndicatorIndicator参数接受RenderFragment可完全替换默认的圆点动画。官方示例使用图标组件Icon配合Spin属性实现旋转图标指示器CustomIndicator.razorSpin IndicatorantIcon / code{ RenderFragment antIcon Icon TypeIconType.Outline.Loading Stylefont-size: 24px Spin /; }要点TypeIconType.Outline.Loading使用 outline 主题的loading图标定义于 IconType.csIcon组件的Spin属性Icon.razor.cs让图标自身执行旋转动画指示符在 Spin.razor 中优先渲染Indicator为空时才回退到默认圆点模板。这套机制让 Spin 的视觉风格可以完全贴合业务品牌例如接入骨架屏、自定义 SVG、或加载进度百分比文本等任意RenderFragment内容。源码视角的完整状态机综合 Spin.razor.cs 的完整实现Spin 的加载状态可归纳为以下流程初始化OnInitialized()调用SetClass()组装ant-spin、ant-spin-spinning、尺寸类与ant-spin-show-text等类名_isLoading置为Spinning初值若Delay 0创建计时器参数更新OnParametersSet()对比_isLoading与Spinning有差异时若存在计时器则重启否则直接同步状态并触发重渲染延迟生效计时器到达后DelayElapsed同步状态并StateHasChanged()销毁Dispose()释放计时器避免内存泄漏。Spinning、Delay与Indicator、Size、Tip、WrapperClassName共同构成了 Spin 完整的功能矩阵前者控制何时展示后者控制长什么样。总结Ant Design Blazor 的 Spin 组件覆盖了从单行指示符到全页面加载的完整场景使用场景推荐写法文本/按钮内局部加载Spin SizeSpinSize.Small /卡片容器级加载Spin /默认尺寸页面级加载Spin SizeSpinSize.Large /内容整体遮罩加载Spin Spinningloading…内容…/Spin带描述文案增加TipLoading...防止快速操作闪烁增加Delay500替换默认指示符传入Indicator如旋转 Icon在 Blazor 应用中最常见的实践是将Spinning绑定到数据加载状态字段配合Delay避免闪烁用Tip提示用户当前进度。所有参数均定义于 Spin.razor.cs样式定义于 components/spin/style/index.less完整的七个官方演示基本、尺寸、嵌套、容器、描述、延迟、自定义指示符均可在 site/AntDesign.Docs/Demos/Components/Spin/demo 目录下查阅可作为你项目中的直接参考样板。赞分享前端UI组件设计系统【免费下载链接】ant-design-blazor基于 Ant Design 与 Blazor 的前端组件库。让开发者解放生产力实现更大价值。项目地址https://gitcode.com/ant-design-blazor/ant-design-blazor点击查看免费下载相关推荐如何用一条命令激活 Windows 11开源脚本 MAS 实用指南如何用一条命令激活 Windows 11开源脚本 MAS 实用指南 刚装完系统右下角的未激活水印让人坐不住。MASMicrosoft ActivatiUI组件前端Ant Design Spin 自定义加载指示符Custom Indicator完整实战指南Ant Design Spin 自定义加载指示符Custom Indicator完整实战指南 Spin 是 Ant Design 反馈Feedback组前端UI组件设计系统ant-design-blazor 中 Spin 加载组件的自定义描述文案Tip实战指南ant design blazor 中 Spin 加载组件的自定义描述文案Tip实战指南 导读 在 Blazor 应用中页面或区块等待异步数据、执行渲染过UI组件前端上一篇告别SQL注入DBeaver参数化查询的安全实现方案下一篇MailCore扩展开发如何自定义邮件解析器和协议处理器创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考