Bernadaus Loaders

Enterprise-grade, high-performance React loading animations.
Engineered for premium user interfaces, dashboards, and modern web applications.

Overview

Bernadaus Loaders is a collection of sophisticated, physics-based loading indicators built specifically for React. Unlike standard spinner libraries, this suite focuses on "Premium" aesthetics—blending glassmorphism, fluid dynamics, and complex orbital mechanics to create loaders that feel alive.

Key Features

• Enterprise Ready: Designed for professional SaaS dashboards and high-end landing pages.
• Zero Runtime Overhead: Powered by CSS Modules and native animations.
• Tree-Shakeable: Fully modular architecture; only bundle what you use.
• TypeScript Support: First-class type definitions included.
• Highly Customizable: Control size, colors, and speeds via props.

---

Installation

npm install bernadaus-loaders

---

Usage

Import any component directly from the package. All components accept a standard set of props for easy configuration.

import { 
  QuantumMesh, 
  LiquidProgress, 
  GraphiteCell 
} from 'bernadaus-loaders';

function App() {
  return (
    <div className="dashboard-loader">
      {/* Enterprise AI Grid */}
      <QuantumMesh size={120} />
      
      {/* Fluid Status Indicator */}
      <LiquidProgress size={80} />
      
      {/* Architectural Grid */}
      <GraphiteCell size={100} />
    </div>
  );
}

---

Component Suite

Enterprise Series

High-fidelity components for complex data applications.

• QuantumMesh: A complex, rotating AI neural grid. Represents Big Data and Machine Learning processing.
• GraphiteCell: A breathing hexagonal grid with dark architectural aesthetics. Perfect for structural data or infrastructure views.
• PlatinumOrbit: An elegant, gyroscopic metallic rotation inspired by premium hardware design.
• OnyxReflection: A glossy, deep-black sphere with realistic environmental reflections.
• FrostPulse: A subtle, expanding glassmorphism effect for light/airy interfaces.
• FluentTiles: Microsoft Acrylic-style grid animations with randomized fade patterns.

Core Physics

Simulations of natural phenomena.

• LiquidProgress: Viscous fluid dynamics loop using advanced SVG filters.
• NeonPulse: Realistic broken-neon flickering text effect ("High Voltage").
• TitaniumRing: Industrial brushed metal spinner with conic gradients.

---

API Reference

Most components accept the following optional props:

Prop	Type	Default	Description
size	number	100	The width and height of the loader in pixels.
color	string	(Varies)	The primary color theme (where applicable).
className	string	''	Additional CSS classes to merge.
style	CSSProperties	{}	Inline styles for the container.

---