Loading Components

Animated loading indicators and progress bars for various loading states and streaming operations, providing visual feedback during asynchronous operations.

Capabilities

Loader Component

Animated loading indicator with spring-based animation system featuring geometric shapes that move in a coordinated pattern.

/**
 * Animated loader component with spring-based animation
 * @param margin - Add margin around the loader (default: true)
 */
export interface LoaderProps {
  margin?: boolean; // default: true
}

Usage Examples:

import { Loader } from "@gradio/statustracker";

// Basic loader with margin
<Loader />

// Loader without margin (for tight layouts)
<Loader margin={false} />

// Conditional loader display
{#if isLoading}
  <Loader margin={true} />
{/if}

StreamingBar Component

Animated progress bar for streaming operations with countdown animation that indicates time remaining for the streaming process.

/**
 * Streaming progress bar with countdown animation
 * @param time_limit - Time limit in seconds for the streaming operation
 */
export interface StreamingBarProps {
  time_limit?: number | null;
}

Usage Examples:

import { StreamingBar } from "@gradio/statustracker";

// Streaming bar with 30-second time limit
<StreamingBar time_limit={30} />

// Conditional streaming bar (only shows when time_limit is set)
<StreamingBar time_limit={timeRemaining} />

// No streaming bar when time_limit is null
<StreamingBar time_limit={null} />

Animation Characteristics

Loader Animation

The Loader component features sophisticated spring-based animation:

• Spring Physics: Uses Svelte's spring motion for smooth, natural movement
• Geometric Design: Two sets of diamond/rhombus shapes that move in coordinated patterns
• Movement Pattern: Complex choreographed movement with translations and positioning changes
• Continuous Loop: Seamless infinite animation loop
• Performance: Optimized for smooth 60fps animation using CSS transforms

StreamingBar Animation

The StreamingBar provides linear countdown visualization:

• Linear Progress: Smooth linear animation from full width to zero
• CSS Animation: Hardware-accelerated CSS transform animation
• Time-Based: Animation duration exactly matches the time_limit parameter
• Visual Feedback: Clear indication of time remaining in streaming operation

Visual Design

Loader Styling

• Size: Fixed size (--size-20 CSS custom property, typically 80px)
• Color: Uses --loader-color CSS custom property for theme integration
• Shape: Geometric diamond/rhombus pattern with gradient fills
• Spacing: Configurable margin via the margin prop

StreamingBar Styling

• Positioning: Absolute positioning at bottom of container
• Dimensions: Full width, 4px height
• Color: Uses --primary-600 CSS custom property
• Animation: Smooth translateX transform from 0% to -100%

Integration Patterns

These loading components are designed to integrate with the broader Gradio UI system:

With StatusTracker

// Loader is automatically used by StatusTracker when appropriate
<StatusTracker
  status="pending"
  show_progress="full"
  // Loader appears automatically when no specific progress data is provided
/>

Standalone Usage

// Independent loading states
{#if dataLoading}
  <div class="loading-container">
    <Loader />
    <p>Loading data...</p>
  </div>
{/if}

// Streaming indication
<div class="streaming-container">
  <StreamingBar time_limit={streamTimeLimit} />
  <div class="streaming-content">
    <!-- Streaming content here -->
  </div>
</div>

Performance Considerations

Both components are optimized for performance:

• CSS Transforms: Use transform properties for hardware acceleration
• RAF Optimization: Loader uses requestAnimationFrame for smooth animation
• Memory Management: Proper cleanup of animation timers and listeners
• Component Lifecycle: Animation starts/stops with component mount/unmount

Accessibility Features

Loading components include accessibility considerations:

• Screen Reader: Loading states can be announced via parent components
• Reduced Motion: Respect user preferences for reduced motion
• Focus Management: Do not interfere with keyboard navigation
• Color Contrast: Use theme colors that meet accessibility guidelines

CSS Custom Properties Integration

Components integrate with the Gradio design system via CSS custom properties:

• --loader-color: Primary color for loader shapes
• --primary-600: Color for streaming bar
• --size-20: Standard size unit for loader dimensions
• --size-4: Height unit for streaming bar

This integration ensures consistent theming across light/dark modes and custom theme configurations.