syncfusion-aspnetcore-spinner

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion ASP.NET Core Spinner

实现Syncfusion ASP.NET Core Spinner

When to Use This Skill

何时使用这份指南

Use this skill when your users need to:

Display loading indicators during async operations (API calls, file uploads)
Show progress feedback to prevent users from thinking the app is frozen
Block user interaction on specific page sections
Customize spinner appearance with colors, themes, or templates
Target specific elements for spinner overlay rendering
Manage spinner lifecycle (create, show, hide, destroy)
Apply different spinner types (Material, Fabric, Bootstrap themes)

当你的用户有以下需求时可使用本指南：

展示加载指示器：在异步操作（API调用、文件上传）期间显示
提供进度反馈：避免用户认为应用已冻结
阻塞特定页面区域的用户交互
自定义Spinner外观：包括颜色、主题或模板
针对特定元素渲染Spinner遮罩
管理Spinner生命周期（创建、显示、隐藏、销毁）
应用不同的Spinner类型（Material、Fabric、Bootstrap主题）

Spinner Overview

Spinner概述

The Syncfusion Spinner is a lightweight loading indicator that appears over a target element to indicate ongoing processing. It's essential for providing visual feedback during async operations in web applications.

Key Characteristics:

Appears as an overlay on a target element
Renders centered within the target
Prevents user interaction with target while visible
Supports theme-based styling (Material, Fabric, Bootstrap)
Can use custom HTML templates for branded indicators
Lightweight and performant

Syncfusion Spinner是一款轻量级加载指示器，会显示在目标元素上方，指示正在进行的处理流程。它是Web应用中异步操作期间提供视觉反馈的核心组件。

核心特性：

作为遮罩层显示在目标元素上方
渲染在目标元素的居中位置
显示期间会阻断用户与目标元素的交互
支持基于主题的样式设置（Material、Fabric、Bootstrap）
可使用自定义HTML模板实现品牌化的指示器
轻量且高性能

Documentation and Navigation Guide

文档与导航指南

Getting Started

入门指南

📄 Read: references/getting-started.md

Installation and prerequisite setup
Adding Syncfusion stylesheet and script resources
Creating your first spinner with
```
createSpinner()
```
Showing and hiding spinners with
```
showSpinner()
```
and
```
hideSpinner()
```
Targeting specific page elements
Basic implementation patterns

📄 阅读： references/getting-started.md

安装与前置环境准备
添加Syncfusion样式表和脚本资源
使用
```
createSpinner()
```
创建你的第一个Spinner
使用
```
showSpinner()
```
和
```
hideSpinner()
```
显示和隐藏Spinner
定位特定页面元素
基础实现模式

Types and Configuration

类型与配置

📄 Read: references/spinner-types.md

Available spinner types (Material, Fabric, Bootstrap, Bootstrap4, High Contrast)
Changing spinner type with
```
setSpinner()
```
Theme-based type selection
When to use each type
Configuration before component creation

📄 阅读： references/spinner-types.md

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

Styling and Customization

样式与自定义

📄 Read: references/styling-customization.md

CSS customization patterns for each theme
Modifying stroke color and appearance
Material theme CSS selectors
Fabric theme CSS selectors
Bootstrap theme CSS selectors
Bootstrap4 theme CSS selectors
High Contrast theme CSS selectors
Using CSS variables and custom styles

📄 阅读： references/styling-customization.md

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

Custom Templates

自定义模板

📄 Read: references/templates.md

Creating custom spinner templates
Using
```
setSpinner()
```
with template configuration
Custom HTML and SVG templates
When to use custom templates
Template scope and initialization order
Styling custom templates with CSS

📄 阅读： references/templates.md

创建自定义Spinner模板
结合模板配置使用
```
setSpinner()
```
自定义HTML和SVG模板
自定义模板的适用场景
模板作用域与初始化顺序
使用CSS为自定义模板设置样式

Configuration Methods Reference

配置方法参考

📄 Read: references/configuration-methods.md

```
createSpinner()
```
method and parameters
```
showSpinner()
```
method and behavior
```
hideSpinner()
```
method and cleanup
```
setSpinner()
```
method for type and template configuration
Target element configuration
Method chaining and initialization patterns

📄 阅读： references/configuration-methods.md

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

Quick Start Example

快速上手示例

Minimal Implementation

最小实现

cshtml

<!-- HTML -->
<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>

cshtml

<!-- HTML -->
<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>

Common Patterns

常见实现模式

Pattern 1: Form Submission with Spinner

javascript

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');
        });
}

Pattern 2: Multiple Async Operations

javascript

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);
    });

Pattern 3: Theme-Based Spinner

javascript

// 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);

模式1：带Spinner的表单提交

javascript

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：多异步操作场景

javascript

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

javascript

// 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);

Key Methods Reference

核心方法参考

Method	Purpose	Usage
`createSpinner(config)`	Initialize spinner for a target	`ej.popups.createSpinner({ target: element })`
`showSpinner(target)`	Display the spinner	`ej.popups.showSpinner(targetElement)`
`hideSpinner(target)`	Hide the spinner	`ej.popups.hideSpinner(targetElement)`
`setSpinner(config)`	Set spinner type/template	`ej.popups.setSpinner({ type: 'Bootstrap' })`

Important:

setSpinner()

must be called BEFORE

createSpinner()

to take effect.

方法	用途	用法
`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' })`

重要提示：

setSpinner()

必须在

createSpinner()

之前调用才能生效。

Common Use Cases

常见用例

Loading Data from Server

javascript

// 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
    });

File Upload Progress

javascript

ej.popups.showSpinner(uploadTarget);

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

Grid Data Binding

javascript

// 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);
};

从服务端加载数据

javascript

// 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
    });

文件上传进度提示

javascript

ej.popups.showSpinner(uploadTarget);

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

表格数据绑定

javascript

// 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);
};

Next Steps

后续步骤

Start with Getting Started - references/getting-started.md
Choose your spinner type - references/spinner-types.md
Customize appearance - references/styling-customization.md
Add custom templates if needed - references/templates.md
Review available methods - references/configuration-methods.md

For more information on Syncfusion ASP.NET Core components, see the main library guide.

从入门指南开始 - references/getting-started.md
选择你的Spinner类型 - references/spinner-types.md
自定义外观 - references/styling-customization.md
按需添加自定义模板 - references/templates.md
查看可用方法 - references/configuration-methods.md

如需了解更多Syncfusion ASP.NET Core组件的信息，请查看主库指南。