Loadify – 100 Pure CSS/HTML Loaders with Live Customization (Vanilla JS)

A curated collection of 100 lightweight, production-ready loaders. Pick any loader, customize color, size, and speed in real time, then copy the HTML or CSS with one click. Pure CSS animations + minimal Vanilla JS for controls and copy-to-clipboard.

Key Features

• 100 hand-crafted loaders: spinners, bars, dots, skeletons, progress, and more.
• Real-time controls: change color (HEX/RGB), size, and animation speed instantly.
• One-click copy: Copy HTML and Copy CSS buttons for each loader.
• Pure CSS animations + Vanilla JS (no frameworks, no dependencies).
• Lightweight and fast: clean code, minimal footprint, production-ready.
• Responsive by default and retina-friendly.
• Well organized file structure and developer-friendly comments.
• Compatible with any stack (plain HTML projects, React, Vue, Angular, etc.).
• Works offline. No CDN required.

What’s Included

• index.html – interactive demo with all 100 loaders and live customization controls.
• styles.css – base layout and structure styles with clean, consistent class naming.
• animations.css – all loader animations and effects, optimized for performance.
• script.js – vanilla JavaScript for customization controls and copy-to-clipboard functionality.
• ”/documentation/” – setup guide, integration steps, and accessibility notes.

How It Works

1. Open index.html in your browser.
2. Browse and choose any loader you like.
3. Tweak Color, Size, and Speed using the built-in controls.
4. Click Copy HTML or Copy CSS to grab the snippet.
5. Paste into your project. Done!

Note: The Copy CSS button requires opening index.html through a local server (e.g. Live Server in VS Code). If you open the file directly, some browsers may block clipboard access.

Loader Categories

• Rings & Spinners – classic rotating circles.
• Dots & Bubbles – bouncing and fading dots animations.
• Bars & Lines – sliding, stretching, and moving bars.
• Skeleton Placeholders – content placeholders for smooth page loading.
• Progress Indicators – filling bars and percentage-style loaders.
• Dual & Triple Loaders – combined multi-shape animations.
• Micro Loaders – minimal loaders for buttons and small UI elements.

Compatibility

• Modern browsers: Chrome, Edge, Firefox, Safari.
• Fallback friendly: graceful degradation on very old browsers.
• Framework-agnostic: copy/paste into any front-end stack.

Performance & Accessibility

• No images, no SVG required, CSS-only animations.
• Lightweight footprint: minified CSS & JS, fast loading.
• Cross-browser support: tested on latest Chrome, Firefox, Safari, and Edge.
• Customizable via CSS variables for size, color, and speed.

Support

Item includes standard support as per Envato policy. Get help with:

• Installation and basic usage.
• Minor bug fixes and clarifications.
• Feature requests are welcome and may be scheduled for updates.

Please contact me via the item support form on my Envato profile. Extended support (12 months) is available at checkout.

Changelog

v1.0.0 – Initial release
- 100 loaders
- Live controls (color, size, speed)
- One-click copy for HTML & CSS

Licensing

Regular License permits use in a single end product. Extended License allows integration within a commercial product offered to end users. The loaders themselves must not be redistributed as a standalone library in either case.

Author

Created and maintained by DonutCode. Thank you for supporting my work!