Loading...
Loading...
Comprehensive guide for implementing loading spinners in ASP.NET Core applications using Syncfusion. Use this skill when implementing loading indicators, providing progress feedback, or blocking UI during async operations. Covers spinner creation, show/hide lifecycle, types, styling, custom templates, and configuration methods. Includes patterns for real-world scenarios like form submission and data loading.
npx skill4agent add syncfusion/aspnetcore-ui-components-skills syncfusion-aspnetcore-spinnercreateSpinner()showSpinner()hideSpinner()setSpinner()setSpinner()createSpinner()showSpinner()hideSpinner()setSpinner()<!-- 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>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');
});
}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);
});// 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);| Method | Purpose | Usage |
|---|---|---|
| Initialize spinner for a target | |
| Display the spinner | |
| Hide the spinner | |
| Set spinner type/template | |
setSpinner()createSpinner()// 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);
};