Blazor 怎么显示加载动画

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 最轻量，动画包适合追求交互动效的场景。不复杂但容易忽略的是：记得在异步操作结束时重置加载状态，否则动画会一直转。