Loading Animation Component
Reusable loading spinner for async operations, page loads, and content fetching.
🎨 Original Animation
The original bouncing dots animation.
🚀 Interactive Demos
Full-Screen Overlay
Show a loading overlay that covers the entire screen.
Inline Loading
Display loading spinner inline within a container.
Size Variants
Different sizes for different contexts.
Async Operation
Wrap async functions with loading spinner.
📖 Usage Examples
JavaScript API
// Show/hide existing spinner
LoadingSpinner.show('my-spinner');
LoadingSpinner.hide('my-spinner');
// Create dynamic spinner
const spinnerId = LoadingSpinner.create({
size: 'medium',
message: 'Loading...',
inline: false
});
// Remove when done
LoadingSpinner.remove(spinnerId);
// Wrap async operation
await LoadingSpinner.withSpinner(async () => {
const data = await fetchData();
return data;
}, { message: 'Fetching data...' });
Jekyll Include
{% include loading-spinner.html id="my-spinner" size="medium" message="Loading..." %}