Blazor显示加载动画有四种方式：1.内置LoadingTemplate（推荐初学者），自动启停、样式可配；2.Skeleton骨架屏，模拟内容结构提升体验；3.手写CSS动画，灵活可控；4.使用BlazorAnimate等动画包实现交互动效。
Blazor 显示加载动画有多种成熟方式，核心思路是：在数据请求过程中，用视觉反馈替代空白等待。选哪种取决于你的场景复杂度、UI库和是否需要自定义控制。
用内置 LoadingTemplate（推荐初学者）
BootstrapBlazor、MudBlazor 等主流组件库都支持 LoadingTemplate，只需在表格、列表等组件里嵌入 Spinner 或 Skeleton 即可，无需手动管理状态。
- 表格加载时自动显示：在
内添加
- 动画自动启停：当
OnQueryAsync方法执行中时，Active状态由组件内部自动控制- 样式统一：颜色、大小、文字都可通过参数配置，比如
Color="Color.Primary"、Size="Size.Large"用 Skeleton 骨架屏提升体验
比纯 Spinner 更高级——它模拟真实内容结构（如标题栏、卡片、表格行），让用户感知“内容正在来”，而不是“系统卡了”。
- 适用场景：首页、详情页、搜索结果页等结构固定的内容区域
- 关键属性是
Active：绑定到你的加载状态变量，比如Active="@isLoading" - 表格骨架可配行列数：
Rows="5" Columns="4"，还能加工具栏占位 - 底层靠 CSS 渐变动画实现，轻量且兼容性好
手写 CSS 动画 + class 绑定（灵活可控）
适合需要精细控制的按钮、弹窗、表单提交等局部动画，不依赖第三方组件。
- 定义两个 CSS 类，比如
.loading（带旋转动画）和.hidden - 在 Razor 中用
@class="@GetLoadingClass()"动态切换 - 配合
Task.Delay或 API 调用，用布尔变量控制显示/隐藏 - 示例：点击按钮后加
transform: scale(0.95)再恢复，模拟点击反馈
用 BlazorAnimate 等动画包（快速上手）
如果项目允许引入轻量 JS 互操作，BlazorAnimate 提供开箱即用的入场、缩放、抖动等效果。
- 安装 NuGet 包后，在
index.html引入脚本 - 给元素加
Trigger和Animation - 适合做页面级过渡、按钮点击反馈、错误输入抖动等交互细节
基本上就这些。选骨架屏适合内容型页面，用 LoadingTemplate 最省心，手写 CSS 最轻量，动画包适合追求交互动效的场景。不复杂但容易忽略的是：记得在异步操作结束时重置加载状态，否则动画会一直转。
- 动画自动启停：当
