Hudini Linear Progress Component

Horizontal progress bar with customizable colors, sizes, and support for both determinate and indeterminate modes.

Linear Progress Component

A horizontal progress bar component with smooth animations, customizable colors, and support for both determinate (showing specific progress) and indeterminate (loading animation) modes.

Features

  • 📊 Determinate Mode: Show specific progress values (0-100%) with smooth animations
  • ♾ī¸ Indeterminate Mode: Animated loading bar for unknown progress duration
  • 🎨 Customizable: Full control over colors, sizes, and border radius
  • ⚡ Animated: Smooth transitions when updating progress values
  • 📏 Flexible Sizing: Set custom width and height in pixels

Props

  • width - Width of the progress bar in pixels (required)
  • height - Height of the progress bar in pixels (required)
  • backgroundColor - Background color token (default: 'gray-200')
  • progressColor - Progress fill color token (default: 'blue-500')
  • borderRadius - Border radius token or pixel value (default: 'default')
  • progress - Initial progress value 0-100 (default: 0)
  • indeterminate - Whether to show indeterminate animation (default: false)
  • indeterminateAnimationDuration - Animation duration in ms (default: 1500)

Methods

  • setProgress(progress, animate?) - Set progress value (0-100), animate defaults to true
  • getProgress() - Get current progress value (0-100)
  • setIndeterminate(indeterminate) - Toggle indeterminate mode
  • setBorderRadius(radius) - Change border radius
  • setBackgroundColor(color) - Change background color
  • setProgressColor(color) - Change progress fill color

Live Example

Loading game...

Usage Example

import Phaser from 'phaser';
import {
    Color,
    createTheme,
    HUDINI_KEY,
    HudiniPlugin,
    SceneWithHudini,
    LinearProgress
} from 'hudini';

const theme = createTheme({});
type Theme = typeof theme;

class ProgressDemoScene extends SceneWithHudini<Theme> {
    private progressBar?: LinearProgress;

    constructor() {
        super('progress-demo');
    }

    create(): void {
        const { pw } = this.hudini;
        this.cameras.main.setBackgroundColor(pw.color.slate(900));

        // Create a progress bar
        this.progressBar = new LinearProgress({
            scene: this,
            x: this.cameras.main.centerX,
            y: this.cameras.main.centerY,
            width: 400,
            height: 20,
            backgroundColor: 'gray-200',
            progressColor: 'blue-500',
            borderRadius: 'md',
            progress: 0,
        });
        this.add.existing(this.progressBar);

        // Animate progress over time
        this.time.addEvent({
            delay: 100,
            callback: () => {
                const current = this.progressBar!.getProgress();
                if (current < 100) {
                    this.progressBar!.setProgress(current + 1);
                }
            },
            repeat: 100,
        });
    }
}