Spinner

Loading indicators and spinners with Hero UI inspired animations, featuring LYD gradient colors and premium styling for luxury applications.

Spinner Variants

Gradient Spinner

Premium gradient spinner with LYD brand colors and conic gradient animation

Default Spinner

Clean circular spinner with border animation

Dots Spinner

Animated dots with bounce effect

Spinner Sizes

Size Variants

Different sizes for various use cases

Loading States

Content Loading Examples

Real-world loading scenarios

Data Table

Loading user data...

Form Submission

Processing request...

API Request

Fetching data...

Dark Theme

Dark Background

Spinners on dark backgrounds

Implementation

HTML Structure


<div class="lyd-loading-spinner-container">
    <div class="lyd-loading-spinner-gradient" style="width: 32px; height: 32px;">
        <div class="lyd-loading-spinner-inner"></div>
    </div>
    <div class="lyd-loading-spinner-label">Loading...</div>
</div>

<!-- Default Spinner -->
<div class="lyd-loading-spinner-container">
    <div class="lyd-loading-spinner-default" style="width: 32px; height: 32px;"></div>
    <div class="lyd-loading-spinner-label">Loading...</div>
</div>

<!-- Dots Spinner -->
<div class="lyd-loading-spinner-container">
    <div class="lyd-loading-spinner-dots">
        <div class="lyd-dot"></div>
        <div class="lyd-dot"></div>
        <div class="lyd-dot"></div>
    </div>
    <div class="lyd-loading-spinner-label">Processing...</div>
</div>

React/Next.js Component

// components/LoadingSpinner.tsx
'use client';

interface LoadingSpinnerProps {
  size?: 'sm' | 'md' | 'lg';
  label?: string;
  variant?: 'default' | 'gradient' | 'dots';
}

export const LoadingSpinner = ({ 
  size = 'md', 
  label = 'Laden...', 
  variant = 'gradient' 
}: LoadingSpinnerProps) => {
  const sizeStyles = {
    sm: { width: '16px', height: '16px' },
    md: { width: '32px', height: '32px' },
    lg: { width: '48px', height: '48px' }
  };

  const labelSizeStyles = {
    sm: { fontSize: '14px' },
    md: { fontSize: '16px' },
    lg: { fontSize: '18px' }
  };

  if (variant === 'gradient') {
    return (
      <div className="lyd-loading-spinner-container">
        <div 
          className="lyd-loading-spinner-gradient"
          style={sizeStyles[size]}
        >
          <div className="lyd-loading-spinner-inner"></div>
        </div>
        {label && (
          <div 
            className="lyd-loading-spinner-label"
            style={labelSizeStyles[size]}
          >
            {label}
          </div>
        )}
      </div>
    );
  }

  if (variant === 'dots') {
    return (
      <div className="lyd-loading-spinner-container">
        <div className="lyd-loading-spinner-dots">
          <div className="lyd-dot"></div>
          <div className="lyd-dot"></div>
          <div className="lyd-dot"></div>
        </div>
        {label && (
          <div 
            className="lyd-loading-spinner-label"
            style={labelSizeStyles[size]}
          >
            {label}
          </div>
        )}
      </div>
    );
  }

  // Default variant
  return (
    <div className="lyd-loading-spinner-container">
      <div 
        className="lyd-loading-spinner-default"
        style={sizeStyles[size]}
      >
      </div>
      {label && (
        <div 
          className="lyd-loading-spinner-label"
          style={labelSizeStyles[size]}
        >
          {label}
        </div>
      )}
    </div>
  );
};

API Reference

Class Description
.lyd-loading-spinner-container Main container for spinner and label
.lyd-loading-spinner-gradient Gradient spinner with conic gradient animation
.lyd-loading-spinner-inner Inner circle for gradient spinner hollow effect
.lyd-loading-spinner-default Default spinner with border animation
.lyd-loading-spinner-dots Container for dots spinner
.lyd-dot Individual animated dot
.lyd-loading-spinner-label Loading text label
.lyd-loading-overlay Overlay for full-area loading states