🚀 SIMPLE LOADER

A lightweight, mobile-first loading component

⚡ Ultra-Fast 📱 Mobile-First 🎨 Customizable 🚀 Zero Dependencies

⚡ Performance Metrics

Built for speed and optimized for mobile devices

~4KB

Gzipped Size

60fps

Smooth Animations

Loader Types

Dependencies

<16ms

First Paint

🎨 Loader Styles

Choose from multiple pre-built loader designs. Click any loader to see it in action!

Spinner

Dots

Pulse

Bar

Wave

Bounce

Ring

Heartbeat

Progress

60%

🎨 Theme Presets

Pre-configured themes for common use cases

Material

iOS

Minimal

Success

Error

Warning

🔧 Customization

Customize the loader to match your brand and design preferences

Type

Size

Speed

Color

Overlay

💻 Quick Start

Get started in seconds with simple, clean code

Basic Usage

// Create a loader instance
const loader = new SimpleLoader({
  color: '#3498db',
  size: 'medium',
  type: 'spinner'
});

// Show the loader
loader.show();

// Hide after 2 seconds
setTimeout(() => loader.hide(), 2000);
      

Advanced Customization

// Create with all options
const loader = new SimpleLoader({
  color: '#667eea',
  size: 'large',
  type: 'pulse',
  overlay: true,
  overlayColor: 'rgba(0, 0, 0, 0.7)',
  speed: 'fast',
  ariaLabel: 'Loading content...'
});

// Update dynamically
loader.update({ color: '#e74c3c', type: 'dots' });

// Listen to events
loader.on('show', () => console.log('Loader shown'));
      

✨ Features

⚡ Ultra-lightweight

Less than 2KB gzipped. Zero dependencies. Pure vanilla JavaScript.

📱 Mobile-First

Optimized for touch devices with smooth 60fps animations.

🎨 Customizable

Simple API to customize colors, sizes, and animation speeds.

♿ Accessible

ARIA labels, reduced motion support, and screen reader friendly.

🎯 Try All Features

Test different loader configurations and see them in action