Loading UI Components

A showcase of different loading UI components for the Haclab website, featuring code-themed loading animations.

Loading Variants

Default

Code Theme

Terminal Theme

Circuit Theme

Size Variants

Button Loading

Interactive Demos

Global Loading Overlay

Demonstrates a full-screen loading overlay that blocks the entire UI while loading.

Content Loading

Demonstrates loading state for a specific content area.

// Content loaded successfully

This content appears after the loading state is complete.

Usage Examples

Implementation Examples

// Global loading
import { useLoading } from '@/context/LoadingContext';

const { startLoading, stopLoading } = useLoading();

// Start loading
startLoading({ text: 'Loading data...', theme: 'code' });

// Stop loading when done
stopLoading();

// Component with loading state
<LoadingWrapper isLoading={isLoading} theme="terminal">
  <YourContent />
</LoadingWrapper>

// Button with loading state
<LoadingButton 
  isLoading={isSubmitting}
  onClick={handleSubmit}
  loadingText="Submitting..."
>
  Submit Form
</LoadingButton>