Spinner

Display animated spinners to indicate ongoing activity.

Basic Usage

Create a self-animating spinner using the fluent API:

csharp

dotnet run

Spinners are self-animating—no external timer or frame counter is needed. The animation is time-based internally, ensuring consistent animation speed regardless of screen refresh rate.

Built-in Styles

Hex1b provides 12 built-in spinner styles. Each style has its own animation interval and behavior:

csharp

dotnet run

Single-Character Styles

Style	Frames	Interval	Description
Dots	⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏	80ms	Braille dot pattern (default)
DotsScrolling	⠿⠾⠽⠻⠟⠯	80ms	Scrolling braille dots
Line	|/-\	100ms	Classic ASCII spinner
Arrow	←↖↑↗→↘↓↙	100ms	Rotating arrow
Circle	◐◓◑◒	120ms	Quarter circle rotation
Square	◰◳◲◱	120ms	Quarter square rotation
Bounce	⠁⠂⠄⠂	80ms	Bouncing dot (ping-pong)
GrowHorizontal	▏▎▍▌▋▊▉█	80ms	Horizontal growth (ping-pong)
GrowVertical	▁▂▃▄▅▆▇█	80ms	Vertical growth (ping-pong)

Multi-Character Styles

Style	Width	Interval	Description
BouncingBall	5 chars	100ms	Ball bouncing between bars
LoadingBar	6 chars	120ms	Bar with animated fill
Segments	3 chars	100ms	Three-segment loader

Custom Styles

Create custom spinners by defining your own frames:

// Simple custom spinner
var custom = new SpinnerStyle("🌑", "🌒", "🌓", "🌔", "🌕", "🌖", "🌗", "🌘");

// Custom spinner with specific interval
var fast = new SpinnerStyle(
    frames: ["⣾", "⣽", "⣻", "⢿", "⡿", "⣟", "⣯", "⣷"],
    interval: TimeSpan.FromMilliseconds(60)
);

// Custom spinner with ping-pong animation
var pingPong = new SpinnerStyle(
    frames: ["▁", "▂", "▃", "▄", "▅", "▆", "▇", "█"],
    interval: TimeSpan.FromMilliseconds(80),
    autoReverse: true  // Plays 0→7→0 instead of 0→7→0→7...
);

Manual Frame Control

For special cases where you need explicit control over which frame is displayed:

// Display a specific frame (no auto-animation)
v.Spinner(frameIndex: 3)

// Specific style with manual frame
v.Spinner(SpinnerStyle.Arrow, frameIndex: myCounter)

When using manual frame control:

• The spinner displays exactly the specified frame
• No automatic redraws are scheduled
• You must update the frame index and trigger redraws yourself

Theming

Customize spinner appearance using the theme system:

csharp

Available theme elements:

Element	Default	Description
Style	SpinnerStyle.Dots	Default spinner style
ForegroundColor	Default	Spinner color
BackgroundColor	Default	Background color

ctx.ThemePanel(
    theme =>
    {
        theme.Set(SpinnerTheme.Style, SpinnerStyle.Arrow);
        theme.Set(SpinnerTheme.ForegroundColor, Hex1bColor.Cyan);
        return theme;
    },
    t => [
        t.HStack(h => [
            h.Spinner(),  // Uses theme's Arrow style and Cyan color
            h.Text(" Processing...")
        ])
    ]
)

Layout Behavior

Spinners measure their width based on the current frame's display width. Most single-character spinners are 1 column wide, while multi-character spinners vary:

// Single character spinner - 1 column wide
h.Spinner(SpinnerStyle.Dots)

// Multi-character spinner - 5 columns wide
h.Spinner(SpinnerStyle.BouncingBall)

The spinner height is always 1 row.

Related Widgets

• Progress - For showing completion percentage
• Text - For status messages alongside spinners
• Layout & Stacks - For arranging spinners with labels