LIVE PREVIEWBUY FOR $15

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

A curated assortment of 100 light-weight, production-ready loaders. Decide any loader, customise shade, dimension, and velocity in actual time, then copy the HTML or CSS with one click on. Pure CSS animations + minimal Vanilla JS for controls and copy-to-clipboard.

Key Options

  • 100 hand-crafted loaders: spinners, bars, dots, skeletons, progress, and extra.
  • Actual-time controls: change shade (HEX/RGB), dimension, and animation velocity immediately.
  • One-click copy: Copy HTML and Copy CSS buttons for every loader.
  • Pure CSS animations + Vanilla JS (no frameworks, no dependencies).
  • Light-weight and quick: clear code, minimal footprint, production-ready.
  • Responsive by default and retina-friendly.
  • Effectively organized file construction and developer-friendly feedback.
  • Appropriate with any stack (plain HTML initiatives, React, Vue, Angular, and so forth.).
  • Works offline. No CDN required.

What’s Included

  • index.html – interactive demo with all 100 loaders and reside customization controls.
  • types.css – base structure and construction types with clear, constant class naming.
  • animations.css – all loader animations and results, optimized for efficiency.
  • script.js – vanilla JavaScript for personalisation controls and copy-to-clipboard performance.
  • ”/documentation/” – setup information, integration steps, and accessibility notes.

How It Works

  1. Open index.html in your browser.
  2. Browse and select any loader you want.
  3. Tweak Colour, Measurement, and Pace utilizing the built-in controls.
  4. Click on Copy HTML or Copy CSS to seize the snippet.
  5. Paste into your mission. Completed!

Observe: The Copy CSS button requires opening index.html via an area server
(e.g. Stay Server in VS Code). When you open the file straight, some browsers could block clipboard entry.

Loader Classes

  • Rings & Spinners – traditional rotating circles.
  • Dots & Bubbles – bouncing and fading dots animations.
  • Bars & Traces – sliding, stretching, and shifting bars.
  • Skeleton Placeholders – content material placeholders for clean web page loading.
  • Progress Indicators – filling bars and percentage-style loaders.
  • Twin & Triple Loaders – mixed multi-shape animations.
  • Micro Loaders – minimal loaders for buttons and small UI parts.

Compatibility

  • Trendy browsers: Chrome, Edge, Firefox, Safari.
  • Fallback pleasant: swish degradation on very previous browsers.
  • Framework-agnostic: copy/paste into any front-end stack.

Efficiency & Accessibility

  • No pictures, no SVG required, CSS-only animations.
  • Light-weight footprint: minified CSS & JS, quick loading.
  • Cross-browser assist: examined on newest Chrome, Firefox, Safari, and Edge.
  • Customizable through CSS variables for dimension, shade, and velocity.

Assist

Merchandise contains commonplace assist as per Envato coverage. Get assist with:

  • Set up and primary utilization.
  • Minor bug fixes and clarifications.
  • Characteristic requests are welcome and could also be scheduled for updates.

Please contact me through the merchandise assist type on my Envato profile. Prolonged assist (12 months) is on the market at checkout.

Changelog

v1.0.0 – Preliminary launch
- 100 loaders
- Stay controls (shade, dimension, velocity)
- One-click copy for HTML & CSS

Licensing

Common License permits use in a single finish product. Prolonged License permits integration inside a industrial product supplied to finish customers. The loaders themselves should not be redistributed as a standalone library in both case.

Creator

Created by DonutCode.
Thanks for supporting my work!


Source