Lumina is a lightweight Web Component library providing 15 cyberpunk-themed loading animations. At only 3KB with zero dependencies, it works universally across React, Vue, Angular, Svelte, and plain HTML projects.

How do I install Lumina?

Run: npm install @radishon/lumina. Then import it in your project: import '@radishon/lumina'. Use the component as:

Is Lumina compatible with React/Vue/Angular?

Yes! Lumina is built as a standard Web Component, making it framework-agnostic. It works seamlessly with React, Vue, Angular, Svelte, and vanilla HTML/JavaScript projects.

What animation types are available?

Lumina includes 15 unique animations: claude, diamond, circle, step, flower, star, snow, spiral, braille, cypher, moon, wave, compass, pixel, and clock. Each features cyberpunk-inspired designs with customizable colors and speeds.

How large is the Lumina package?

Lumina is only 3KB when minified, with zero dependencies. This makes it one of the lightest loading animation libraries available, perfect for performance-conscious projects.

Can I customize the animation colors?

Yes! Lumina supports custom colors via the color attribute. Use any valid CSS color value: or .

Does Lumina support server-side rendering (SSR)?

Yes, Lumina works with SSR frameworks like Next.js and Nuxt. The Web Component is registered client-side, but the initial HTML is SSR-compatible. Use dynamic imports with { ssr: false } in Next.js if needed.

How do I customize the character sequence?

Use the char attribute to set a custom character: . Supported values include any single character, emoji, or short string.

Is Lumina accessible (a11y)?

Lumina includes ARIA attributes for screen reader compatibility. The component uses role='status' and aria-label to indicate loading state. Animations are designed to minimize motion sickness triggers.

What browsers are supported?

Lumina supports all modern browsers that implement Web Components v1: Chrome 67+, Firefox 63+, Safari 10.1+, Edge 79+. For IE11 support, include the @webcomponents/webcomponentsjs polyfill.

LUMINA

Animation Loading That Shines

Speed:180ms

npm install @radishon/lumina

React

Vue

Angular

Svelte

HTML

15 Animation Types

Click to preview. Each with unique character.

Why Lumina?

Lightweight, elegant, works everywhere.

Framework-Free

Web Component magic — works with React, Vue, Angular, Svelte, plain HTML

Zero Deps

Just 3KB minified. No baggage. Loads instantly.

15 Animations

From cyberpunk to nature. Find your vibe.

Full Control

Custom chars, colors, speed. Make it yours.

98% Smaller

Compared to other loading libraries.

Library	Size (minified)	Dependencies	Frameworks
Lumina	3KB	0	All
react-spinners	15KB	1 (React)	React only
loading-io	25KB	12+	React, Vue
css-loaders	8KB	0	All (CSS only)

0ms

Bundle Impact

15

Animation Types

100%

Framework Free

Simple to Use

One import, unlimited possibilities.

import "@radishon/lumina";

function App() {
  return (
    <lumina-loading type="moon" speed="200" />
  );
}

Custom Characters and Colors

<lumina-loading char="*" color="#ffd700" speed="100" />