⚡ LoaderX-Arun

May 30, 2026 · View on GitHub

⚡ 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)

Build Output

🛠️ 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

1. Add CSS to the appropriate file in `src/core/styles/` (or `extra.css`):
   ```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!