Hudini Circular Progress Component

Animated circular progress indicator using Font Awesome icons with customizable colors, sizes, and rotation speed.

Circular Progress Component

An animated circular progress indicator that uses Font Awesome icons and PhaserWind color tokens. Perfect for loading states, progress indicators, and visual feedback.

Features

  • 🔄 Animated: Smooth rotation animation with configurable speed
  • 🎨 Customizable: Choose from any Font Awesome icon and PhaserWind color
  • ⚙ī¸ Controllable: Start, stop, and adjust rotation speed dynamically
  • 📏 Flexible Sizing: Use PhaserWind font size tokens or pixel values

Props

  • icon - Font Awesome icon key (default: 'spinner')
  • size - Font size token or pixel value (default: 'md')
  • color - PhaserWind color token (default: 'blue')
  • rotationsPerMinute - Rotation speed in RPM (default: 60)

Methods

  • start() - Start the spinning animation
  • stop() - Stop the spinning animation
  • setRotationsPerMinute(rpm) - Change rotation speed in RPM
  • setIcon(icon) - Change the icon
  • setColor(color) - Change the color
  • setSize(size) - Change the size
  • spinning - Boolean property to check if currently spinning

Live Example

Loading game...

Usage Example

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

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

class ProgressDemoScene extends SceneWithHudini<Theme> {
    constructor() {
        super('progress-demo');
    }

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

        // Default circular progress
        const defaultProgress = new CircularProgress({
            scene: this,
            x: this.cameras.main.centerX,
            y: this.cameras.main.centerY - 100,
        });
        this.add.existing(defaultProgress);

        // Custom colored progress
        const coloredProgress = new CircularProgress({
            scene: this,
            x: this.cameras.main.centerX,
            y: this.cameras.main.centerY,
            color: 'green',
            size: 'lg',
        });
        this.add.existing(coloredProgress);

        // Custom icon and speed
        const customProgress = new CircularProgress({
            scene: this,
            x: this.cameras.main.centerX,
            y: this.cameras.main.centerY + 100,
            icon: 'gear',
            color: 'purple',
            rotationsPerMinute: 60, // 1 rotation per second
        });
        this.add.existing(customProgress);
    }
}