loaderx-arun

v1.2.0

Published

2 months ago

LoaderX by Arun — 210+ zero-dependency, framework-agnostic animated UI loaders for React, Angular, Vue, vanilla JS, and SSR environments.

0High
0Medium
0Low

arunsahani44

loader spinner loading ui css react web-components angular vue vanilla universal accessible a11y skeleton progress animation

⚡ LoaderX-Arun

500+ Next-Generation Animated UI Loaders

Zero dependencies · Pure CSS core · Works everywhere

React · Next.js · Vue · Angular · Vanilla HTML · CDN · SSR

🌟 Why LoaderX-Arun?

| Feature | Detail | |---|---| | 🎨 500+ Loaders | Spinners, Dots, Bars, Shapes, Glow, Tech, Nature, Creative, Robotic, Science & Technology | | 📦 Zero Dependencies | Pure CSS core — no bloat, no lock-in | | ⚡ Plug & Play | One CSS file. No build step needed for vanilla HTML | | 🌳 Tree-Shakable | Import only the React components you need | | ♿ Accessible | ARIA roles, aria-live, and screen reader text built-in | | 🎛️ CSS Variables | Color, size, speed — all customizable via --ul-* variables | | 🌐 Universal Builds | ESM · CJS · UMD (CDN) | | 🖥️ SSR Safe | No window/document errors in Next.js / Node.js | | 🔷 Web Components | <ul-loader> custom element works in any framework |

📦 Installation

# npm
npm install loaderx-arun

# yarn
yarn add loaderx-arun

# pnpm
pnpm add loaderx-arun

CDN (no install required)

<!-- Stylesheet only — all 500+ loaders -->
<link rel="stylesheet" href="https://unpkg.com/loaderx-arun/dist/style.css" />

<!-- UMD bundle (Web Components + utilities) -->
<script src="https://unpkg.com/loaderx-arun/dist/loaderx-arun.umd.js"></script>

🚀 Quick Start

Vanilla HTML (no JavaScript needed)

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://unpkg.com/loaderx-arun/dist/style.css" />
</head>
<body>

  <!-- Spinner -->
  <div class="ul-loader ul-spinner" role="status" aria-live="polite">
    <span class="ul-sr-only">Loading…</span>
  </div>

  <!-- Dots -->
  <div class="ul-loader ul-dots" role="status" aria-live="polite">
    <span class="ul-dots__dot"></span>
    <span class="ul-sr-only">Loading…</span>
  </div>

  <!-- Neon Ring (glow effect) -->
  <div class="ul-loader ul-neon-ring" role="status" aria-live="polite">
    <span class="ul-sr-only">Loading…</span>
  </div>

  <!-- Custom color & size via CSS variables -->
  <div class="ul-loader ul-spinner"
       style="--ul-color:#ef4444; --ul-size:48px; --ul-speed:0.6s;"
       role="status" aria-live="polite">
    <span class="ul-sr-only">Loading…</span>
  </div>

</body>
</html>

⚛️ React / Next.js

npm install loaderx-arun

import { Loader, Spinner, Dots, Ring, Bars, Pulse, Progress } from 'loaderx-arun/react';
import 'loaderx-arun/style.css';

export default function App() {
  return (
    <div>
      {/* Basic usage */}
      <Spinner />
      <Dots />
      <Ring />

      {/* With props */}
      <Spinner color="#ef4444" size="lg" speed="0.5s" />
      <Loader type="neon-ring" color="#8b5cf6" size="xl" />
      <Loader type="galaxy" color="#06b6d4" />

      {/* Progress bar */}
      <Progress color="#10b981" />

      {/* Custom aria label */}
      <Loader type="dots" label="Fetching your data…" />
    </div>
  );
}

🟢 Vue 3

npm install loaderx-arun

<template>
  <div>
    <ul-loader type="spinner" color="#3b82f6"></ul-loader>
    <ul-loader type="neon-ring" color="#8b5cf6" size="lg"></ul-loader>
    <ul-loader type="dots-typing" color="#10b981"></ul-loader>
    <ul-loader type="equalizer" color="#f59e0b" size="xl"></ul-loader>
  </div>
</template>

<script setup>
import 'loaderx-arun/web-components'; // registers <ul-loader>
</script>

Vue 3 Vite config — tell Vue to skip custom elements:

// vite.config.ts
import vue from '@vitejs/plugin-vue';

export default {
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag.startsWith('ul-')
        }
      }
    })
  ]
};

🅰️ Angular

npm install loaderx-arun

Step 1 — Add CSS to angular.json:

"styles": [
  "node_modules/loaderx-arun/dist/style.css"
]

Step 2 — Use in any component:

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import 'loaderx-arun/web-components';

@Component({
  selector: 'app-loading',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <ul-loader type="spinner" color="#6366f1"></ul-loader>
    <ul-loader type="bars" color="#ef4444" size="lg"></ul-loader>
    <ul-loader type="radar" color="#10b981"></ul-loader>
  `,
})
export class LoadingComponent {}

🌐 Web Components (Framework-agnostic)

<!-- Register once in your entry -->
<script type="module">
  import 'loaderx-arun/web-components';
</script>

<!-- Use anywhere -->
<ul-loader type="spinner"></ul-loader>
<ul-loader type="dots" color="#10b981" size="lg"></ul-loader>
<ul-loader type="ring-neon" color="#8b5cf6" speed="0.8s"></ul-loader>
<ul-loader type="galaxy" color="#06b6d4" size="xl"></ul-loader>

🎨 Customization

CSS Variables (all loaders)

| Variable | Default | Description | |---|---|---| | --ul-color | #3b82f6 | Primary loader color | | --ul-secondary-color | rgba(59,130,246,0.2) | Track / secondary color | | --ul-size | 40px | Width & height | | --ul-speed | 1s | Animation duration | | --ul-border-width | 3px | Border thickness | | --ul-dot-size | calc(size/4) | Dot diameter |

Global Theme Override

/* styles.css or :root block */
:root {
  --ul-color: #8b5cf6;   /* purple theme */
  --ul-size: 48px;
  --ul-speed: 0.75s;
}

Per-instance Override

<div class="ul-loader ul-spinner"
     style="--ul-color:#ef4444; --ul-size:32px; --ul-speed:0.5s;">
</div>

React Props

| Prop | Type | Default | Description | |---|---|---|---| | type | LoaderType | 'spinner' | Loader variant | | color | string | '#3b82f6' | Primary color | | size | 'sm' \| 'md' \| 'lg' \| 'xl' \| string | 'md' | Loader size | | speed | string | '1s' | Animation speed | | label | string | 'Loading…' | Screen reader text | | className | string | — | Extra CSS class |

Size Presets

| Key | Value | |---|---| | sm | 24px | | md | 40px (default) | | lg | 56px | | xl | 80px |

🗂️ Loader Categories (500+ total)

| Category | Count | Examples | |---|---|---| | 🌀 Spinners & Rings | 33 | spinner, ring-neon, gyro, cyclone, dual-ring-pulse | | ⚫ Dots & Particles | 24 | dots-typing, fireflies, constellation, dots-clock | | 📊 Bars & Lines | 24 | equalizer, waveform, spectrum, led-bar, stretching | | 🔷 Shapes & Geometry | 27 | cube-3d, hexagon, morph-shape, yin-yang, target | | ✨ Glow & Neon | 25 | neon-ring, plasma, holographic, aurora, reactor | | 💻 Tech & UI | 22 | radar, dna, glitch, matrix, biometric, qr-scan | | 🌿 Nature | 19 | fire-flame, snowflake, tornado, petal-spin, meteor-shower | | 🎨 Creative & Fun | 28 | pacman, jelly, confetti, heart-beat, ripple-send | | 🤖 Robotic | 96 | robo-arm-1, servo-turn-1, android-eye-1, bot-face-1, gear-train-1 | | 🧪 Science | 97 | quantum-spin-1, molecule-bond-1, cosmic-orbit-1, particle-beam-1 | | ⚙️ Technology | 97 | neural-synapse-1, processor-core-1, cyber-shield-1, binary-matrix-1 |

Sample Loader Classes

<!-- Spinners -->
<div class="ul-loader ul-spinner"></div>
<div class="ul-loader ul-ring-neon"></div>
<div class="ul-loader ul-gyro"></div>
<div class="ul-loader ul-cyclone"></div>

<!-- Dots -->
<div class="ul-loader ul-dots-typing">
  <span class="ul-d"></span><span class="ul-d"></span><span class="ul-d"></span>
</div>
<div class="ul-loader ul-equalizer">
  <span class="ul-d"></span><span class="ul-d"></span>
  <span class="ul-d"></span><span class="ul-d"></span>
  <span class="ul-d"></span><span class="ul-d"></span>
</div>

<!-- Glow -->
<div class="ul-loader ul-plasma"></div>
<div class="ul-loader ul-holographic"></div>
<div class="ul-loader ul-aurora"></div>

<!-- Tech -->
<div class="ul-loader ul-radar"></div>
<div class="ul-loader ul-glitch"></div>

<!-- Nature -->
<div class="ul-loader ul-fire-flame"></div>
<div class="ul-loader ul-tornado">
  <span class="ul-d"></span><span class="ul-d"></span>
  <span class="ul-d"></span><span class="ul-d"></span>
  <span class="ul-d"></span>
</div>

<!-- Creative -->
<div class="ul-loader ul-pacman"></div>
<div class="ul-loader ul-jelly"></div>
<div class="ul-loader ul-heart-beat"></div>

♿ Accessibility

Every loader ships with proper ARIA support out of the box:

<div class="ul-loader ul-spinner"
     role="status"
     aria-live="polite"
     aria-label="Loading content">
  <span class="ul-sr-only">Loading…</span>
</div>

role="status" — marks it as a live region
aria-live="polite" — screen readers announce without interrupting
.ul-sr-only — visually hidden text for screen readers

In React, the label prop customizes the hidden text:

<Spinner label="Uploading your file, please wait…" />

🌐 Browser Support

| Browser | Minimum Version | |---|---| | Chrome | 80+ | | Firefox | 75+ | | Safari | 13.1+ | | Edge | 80+ | | iOS Safari | 13.4+ | | Android Chrome | 80+ |

All loaders use standard CSS animations and custom properties. No JavaScript is required for CSS-only usage.

📦 Package Exports

loaderx-arun                → Core types & utilities (ESM/CJS)
loaderx-arun/react          → React wrapper components
loaderx-arun/web-components → <ul-loader> custom element
loaderx-arun/style.css      → Full bundled CSS (500+ loaders)

🛠️ Development

# Clone & install
git clone https://github.com/arun/loaderx-arun.git
cd loaderx-arun
npm install

# Build everything (JS + CSS + UMD)
npm run build

# CSS only (fast rebuild for CSS changes)
npm run build:css

# Type check
npm run typecheck

# Preview demo (http://localhost:4242)
npx http-server . -p 4242
# → open http://localhost:4242/examples/vanilla/index.html

# Clean dist folder
npm run clean

Adding a New Loader

Add CSS to the appropriate file in src/core/styles/ (or extra.css):

.ul-my-loader {
  width: var(--ul-size);
  height: var(--ul-size);
  /* your animation */
}

Add the name to LOADER_TYPES in src/core/index.ts
Run npm run build:css to regenerate dist/style.css
Add an entry to the LOADERS array in examples/vanilla/index.html

🚢 Publishing

# 1. Build everything
npm run build

# 2. Preview what will be published
npm pack --dry-run

# 3. Login (first time only)
npm login

# 4. Publish
npm publish

Pre-publish checklist:

[ ] Version bumped in package.json
[ ] npm run build succeeds
[ ] Demo page shows all loaders correctly
[ ] TypeScript types exist in dist/
[ ] npm pack --dry-run shows only dist/ and README.md

🤝 Contributing

Contributions are welcome! To add new loaders:

Fork the repository
Create a CSS class following the ul- prefix convention
Use CSS variables (--ul-color, --ul-size, --ul-speed) — no hardcoded values
Add to LOADER_TYPES, rebuild, and update the demo
Open a Pull Request with a screenshot 🎉

📄 License

Made with ❤️ by Arun · npm · GitHub

Star ⭐ the repo if LoaderX-Arun helped you!