Blazor显示加载动画有四种方式：1.内置LoadingTemplate（推荐初学者），自动启停、样式可配；2.Skeleton骨架屏，模拟内容结构提升体验；3.手写CSS动画，灵活可控；4.使用BlazorAnimate等动画包实现交互动效。

Blazor 显示加载动画有多种成熟方式，核心思路是：在数据请求过程中，用视觉反馈替代空白等待。选哪种取决于你的场景复杂度、UI库和是否需要自定义控制。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

用内置 LoadingTemplate（推荐初学者）

BootstrapBlazor、MudBlazor 等主流组件库都支持 LoadingTemplate，只需在表格、列表等组件里嵌入 Spinner 或 Skeleton 即可，无需手动管理状态。

• 表格加载时自动显示：在 <table> 内添加 <code><loadingtemplate></loadingtemplate>，里面放 <spinner></spinner> 和提示文字
• 动画自动启停：当 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 引入脚本
• 给元素加 <animate ...></animate> 组件，设置 Trigger 和 Animation
• 适合做页面级过渡、按钮点击反馈、错误输入抖动等交互细节

基本上就这些。选骨架屏适合内容型页面，用 LoadingTemplate 最省心，手写 CSS 最轻量，动画包适合追求交互动效的场景。不复杂但容易忽略的是：记得在异步操作结束时重置加载状态，否则动画会一直转。