syncfusion-aspnetcore-spinner

实现 Syncfusion ASP.NET Core Spinner

何时使用此技能

当用户需要执行以下操作时，请使用此技能：

• 在异步操作期间显示加载指示器（API 调用、文件上传）
• 显示进度反馈，避免用户误以为应用已冻结
• 阻止用户与页面特定区域进行交互
• 自定义 Spinner 外观，包括颜色、主题或模板
• 指定 Spinner 覆盖层的渲染目标元素
• 管理 Spinner 生命周期（创建、显示、隐藏、销毁）
• 应用不同类型的 Spinner（Material、Fabric、Bootstrap 主题）

Spinner 概述

Syncfusion Spinner 是一种轻量级加载指示器，会显示在目标元素上方，以提示正在进行处理。它对于在 Web 应用中异步操作期间提供视觉反馈至关重要。

主要特点：

• 以覆盖层形式显示在目标元素上
• 在目标元素内居中渲染
• 显示期间阻止用户与目标元素交互
• 支持基于主题的样式（Material、Fabric、Bootstrap）
• 可使用自定义 HTML 模板创建品牌化指示器
• 轻量且高效

文档和导航指南

入门

📄 阅读： references/getting-started.md

• 安装和先决条件设置
• 添加 Syncfusion 样式表和脚本资源
• 使用 createSpinner() 创建第一个 Spinner
• 使用 showSpinner() 和 hideSpinner() 显示和隐藏 Spinner
• 指定页面上的特定元素
• 基本实现模式

类型和配置

📄 阅读： references/spinner-types.md

• 可用的 Spinner 类型（Material、Fabric、Bootstrap、Bootstrap4、高对比度）
• 使用 setSpinner() 更改 Spinner 类型
• 基于主题选择类型
• 各类型的适用场景
• 创建组件前进行配置

样式和自定义

📄 阅读： references/styling-customization.md

• 各主题的 CSS 自定义模式
• 修改描边颜色和外观
• Material 主题 CSS 选择器
• Fabric 主题 CSS 选择器
• Bootstrap 主题 CSS 选择器
• Bootstrap4 主题 CSS 选择器
• 高对比度主题 CSS 选择器
• 使用 CSS 变量和自定义样式

自定义模板

📄 阅读： references/templates.md

• 创建自定义 Spinner 模板
• 使用带模板配置的 setSpinner()
• 自定义 HTML 和 SVG 模板
• 使用自定义模板的场景
• 模板作用范围和初始化顺序
• 使用 CSS 设置自定义模板的样式

配置方法参考

📄 阅读： references/configuration-methods.md

• createSpinner() 方法及其参数
• showSpinner() 方法及其行为
• hideSpinner() 方法及其清理操作
• 用于类型和模板配置的 setSpinner() 方法
• 目标元素配置
• 方法链式调用和初始化模式

快速入门示例

最简实现

<div id="container">
    <p>Content here</p>
    <button id="loadBtn">Start Loading</button>
</div>

<script>
    // Create spinner targeting the container
    var target = document.getElementById('container');
    ej.popups.createSpinner({ target: target });
    
    // Show spinner on button click
    document.getElementById('loadBtn').addEventListener('click', function() {
        ej.popups.showSpinner(target);
        
        // Simulate async work
        setTimeout(function() {
            ej.popups.hideSpinner(target);
        }, 3000);
    });
</script>

常见模式

模式 1：使用 Spinner 提交表单

function submitForm() {
    var target = document.getElementById('formContainer');
    ej.popups.createSpinner({ target: target });
    ej.popups.showSpinner(target);
    
    fetch('/api/submit', { method: 'POST', body: formData })
        .then(response => response.json())
        .then(data => {
            ej.popups.hideSpinner(target);
            showSuccessMessage('Form submitted');
        })
        .catch(error => {
            ej.popups.hideSpinner(target);
            showErrorMessage('Submission failed');
        });
}

模式 2：多个异步操作

var target = document.getElementById('container');
ej.popups.createSpinner({ target: target });

// Show once, hide when all complete
Promise.all([fetch1(), fetch2(), fetch3()])
    .then(() => {
        ej.popups.showSpinner(target);
        // Process results
        ej.popups.hideSpinner(target);
    });

模式 3：基于主题的 Spinner

// Set spinner type before creating other components
ej.popups.setSpinner({ type: 'Bootstrap' });

var target = document.getElementById('container');
ej.popups.createSpinner({ target: target });
ej.popups.showSpinner(target);

关键方法参考

方法	用途	用法
createSpinner(config)	为目标元素初始化 Spinner	ej.popups.createSpinner({ target: element })
showSpinner(target)	显示 Spinner	ej.popups.showSpinner(targetElement)
hideSpinner(target)	隐藏 Spinner	ej.popups.hideSpinner(targetElement)
setSpinner(config)	设置 Spinner 类型/模板	ej.popups.setSpinner({ type: 'Bootstrap' })

重要提示： 必须在 createSpinner() 之前调用 setSpinner() 才能生效。

常见用例

从服务器加载数据

// Show spinner while fetching data
ej.popups.showSpinner(target);

fetch('/api/data')
    .then(r => r.json())
    .then(data => {
        populateUI(data);
        ej.popups.hideSpinner(target);  // Hide when done
    });

文件上传进度

ej.popups.showSpinner(uploadTarget);

uploadFile(file)
    .then(() => {
        ej.popups.hideSpinner(uploadTarget);
        showMessage('Upload complete');
    });

网格数据绑定

// Show spinner while grid loads data
ej.popups.showSpinner(gridContainer);

// Grid handles its own loading after initialization
// Hide spinner when grid dataBound event fires
gridInstance.dataBound = function() {
    ej.popups.hideSpinner(gridContainer);
};

后续步骤

1. 从入门指南开始 - references/getting-started.md
2. 选择微调器类型 - references/spinner-types.md
3. 自定义外观 - references/styling-customization.md
4. 如有需要，添加自定义模板 - references/templates.md
5. 查看可用方法 - references/configuration-methods.md

---

如需了解有关 Syncfusion ASP.NET Core 组件的更多信息，请参阅主库指南。