Siticone Expressive Horizontal Progress

The SiticoneExpressiveHorizontalProgress is a unique take on the traditional linear progress bar. Instead of a flat fill, it employs a mathematically locked sine wave animation where both the track and the progress indicator animate in perfect unison. This prevents visual discrepancies and creates a mesmerizing "liquid flow" effect.

Core Data & Behavior

Properties controlling the progress values and operation mode.

Property	Type	Description & Usage Example
`Value`	int	bar.Value = 45; The current progress (0 to Maximum). Changes are smoothed automatically via interpolation.
`Maximum`	int	bar.Maximum = 100; The upper limit of the progress range.
`ProgressType`	Enum	bar.ProgressType = ExpressiveHorizontalProgressType.Indeterminate; Determinate: Linear fill based on value. Indeterminate: A "bouncing" segment that stretches and shrinks while flowing.
`IsRunning`	bool	bar.IsRunning = true; Starts or stops the internal animation timer (waves and flow).

Appearance & Styling

Customize the colors, line thickness, and rendering style.

Property	Type	Description & Usage Example
`Thickness`	float	bar.Thickness = 6f; The width of the progress line stroke.
`ColorStyle`	Enum	bar.ColorStyle = ExpressiveHorizontalProgressColorStyle.Solid; Solid: Uses `PrimaryColor`. Multicolor: Uses `GradientColors`. Random: Morphs through random colors over time.
`PrimaryColor`	Color	bar.PrimaryColor = Color.DodgerBlue; The main color used in Solid mode.
`TrackColor`	Color	bar.TrackColor = Color.FromArgb(30, 0, 0, 0); The background wave color. Supports transparency.
`GradientColors`	List<Color>	bar.GradientColors.Add(Color.Orange); Colors used for gradient fill when ColorStyle is Multicolor.

Wave Animation

These properties control the "liquid" physics of the bar.

Property	Type	Description & Usage Example
`WaveAmplitude`	float	bar.WaveAmplitude = 5f; The height of the sine wave peaks. Note: The wave automatically straightens out (Amplitude -> 0) when Value reaches Maximum.
`WaveFrequency`	int	bar.WaveFrequency = 4; The number of wave cycles visible across the width of the control.
`RotationSpeed`	int	bar.RotationSpeed = 3; Controls the Flow Speed of the wave moving horizontally. Higher values = faster flow.

Theming

Instantly style the control using the built-in theme engine.

Property	Type	Description & Usage Example
`ApplyTheme(Theme)`	Method	bar.ApplyTheme(ExpressiveHorizontalProgressTheme.NeonCyber); Sets colors and transparency based on presets like `MaterialGreen`, `DarkOcean`, `Industrial`, etc.

Public Methods

Clipboard Operations

// Copies current visual settings (Colors, Wave settings, Thickness) to clipboard.
bar1.CopyUISettings();

// Pastes settings from clipboard to another instance.
bar2.PasteUISettings();

Events

Events Wiring

// Occurs when Value changes (provides Old and New values)
bar.ValueChanged += (s, e) => 
{
                Debug.WriteLine($"Progress: {e.New}%");
};

// Occurs on every animation frame (high frequency)
// Useful for custom drawing on top of the control
bar.AnimationStep += (s, e) => 
{
                // e.Phase contains the current wave offset
};

Detailed Usage Examples

Example 1: Standard File Download

A classic determinate progress bar with a subtle wave effect.

C# - Determinate

public void SetupDownloadBar()
{
    bar.ProgressType = ExpressiveHorizontalProgressType.Determinate;
    bar.Maximum = 100;
    bar.Value = 0;
    
                // Styling
    bar.ApplyTheme(ExpressiveHorizontalProgressTheme.MaterialBlue);
    bar.Thickness = 5f;
    
                // Gentle wave
    bar.WaveAmplitude = 3f;
    bar.WaveFrequency = 3;
    bar.RotationSpeed = 2; // Slow flow
    
    bar.IsRunning = true;
}

public void UpdateProgress(int bytes, int total)
{
                int percent = (int)((bytes / (float)total) * 100);
    bar.Value = percent;
}

Example 2: Buffering (Indeterminate)

Used when waiting for a stream or unknown task length. The segment bounces left and right while stretching.

C# - Indeterminate

public void SetBufferingMode()
{
    bar.ProgressType = ExpressiveHorizontalProgressType.Indeterminate;
    
                // Styling
    bar.PrimaryColor = Color.OrangeRed;
    bar.TrackColor = Color.FromArgb(30, Color.OrangeRed);
    
                // Faster animation for busy state
    bar.RotationSpeed = 4;
    bar.IsRunning = true;
}

Example 3: Health Bar (Gradient)

A static "Health" display that uses a multi-color gradient (Red to Green).

C# - Gradient Health

public void SetupHealthBar()
{
    bar.ColorStyle = ExpressiveHorizontalProgressColorStyle.Multicolor;
    bar.GradientColors = new List<Color> 
    { 
                Color.Red, 
                Color.Yellow, 
                Color.LimeGreen 
    };
    
                // No flow animation, just a static wave shape
    bar.RotationSpeed = 0; 
    bar.WaveAmplitude = 4f;
    bar.IsRunning = true; // Required for value smoothing
}

Example 4: Audio Wave Visualization

Simulating an audio waveform using high frequency and high amplitude.

C# - Audio Visualizer Style

public void SetupAudioWave()
{
    bar.ApplyTheme(ExpressiveHorizontalProgressTheme.NeonPink);
    
                // High frequency waves
    bar.WaveFrequency = 10;
    bar.WaveAmplitude = 8f;
    bar.Thickness = 3f;
    
                // Fast flow
    bar.RotationSpeed = 6;
    bar.IsRunning = true;
}