syncfusion-javascript-spinner

用途

Syncfusion JavaScript Spinner 是一个轻量级、可主题化的加载指示器组件，用于在异步操作进行期间向用户提供视觉反馈，让用户知道应用正在处理中。它属于 Essential JS 2 的 @syncfusion/ej2-popups 包，适用于 TypeScript 项目，也可在原生 JavaScript 或任意框架中使用。

主要能力

提供加载动画，用于数据获取、文件上传、表单提交、页面导航、批量操作、身份验证、报表生成、实时同步等场景的忙碌指示。
支持全局显示（覆盖整个页面、居中）或针对特定 DOM 元素显示。
支持内置主题：Material、Bootstrap、Fabric，也可自定义主题。
支持配置加载标签与提示消息、自定义颜色与尺寸、自定义 CSS 样式、RTL（从右到左）布局。
支持通过 setSpinner() 方法使用自定义模板，创建品牌化或自定义的加载指示器。
提供完整的 TypeScript 类型支持与 ES6 模块导出。

使用方式

核心 API 包括三个方法：

createSpinner(options)：在目标容器上创建 spinner 元素，必须在 show/hide 之前调用。
showSpinner(target)：使 spinner 可见并播放动画。
hideSpinner(target)：隐藏 spinner 并停止动画。

最小示例：

import { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';

createSpinner({
  target: document.getElementById('loader-container')
});

showSpinner(document.getElementById('loader-container'));

setTimeout(() => {
  hideSpinner(document.getElementById('loader-container'));
}, 3000);

HTML：

<div id="loader-container" style="height: 400px; display: flex; align-items: center; justify-content: center;"></div>

CSS：

@import '@syncfusion/ej2-popups/styles/material.css';

常见模式包括：在 API 调用前显示 spinner、在 finally 块中隐藏以确保清理；表单提交期间显示 spinner；为多个区域分别创建 spinner 并在并行操作完成后统一隐藏。

适用场景

数据加载：从 API 获取数据时显示 spinner。
表单提交：表单处理期间显示 spinner。
文件上传：指示上传进行中。
页面导航：路由切换之间显示加载状态。
批量操作：批量动作期间提供反馈。
身份验证：登录/登出期间显示加载指示。
报表生成：复杂查询的处理反馈。
实时同步：后台更新的同步状态指示。

限制与选择建议

Spinner 适用于时长未知、只需表明“正在处理”的场景；若可测量完成百分比（如文件上传进度），应使用 ProgressBar。
必须在调用 showSpinner/hideSpinner 之前先调用 createSpinner 创建实例。
建议在 finally 块中调用 hideSpinner，以保证操作成功或出错时都能清理。
关于具体安装步骤、主题导入细节、自定义模板实现与高级用法，资料中提供了对应的参考文档（getting-started.md、spinner-methods.md、theming-and-styling.md、custom-templates.md、advanced-usage.md），可进一步查阅。

触发关键词

Spinner、loading indicator、busy loader、progress indicator、loading animation、async feedback、show loading、hide spinner、Syncfusion spinner、ej2-popups spinner。