Siticone Expressive Radial Progress

The SiticoneExpressiveRadialProgress is an advanced circular loader that combines standard progress tracking with "expressive" motion. It features a unique Wave Animation along the progress track, physics-based rotation, and a comprehensive Completion System. When the progress reaches 100%, the control can automatically transition into a success state with animated checkmarks, value displays, and haptic visual feedback (shakes/blinks).

Core Data & Behavior

Basic properties to control the value and operation mode of the loader.

Property	Type	Description & Usage Example
`Value`	int	radial.Value = 75; The current progress value (0 to Maximum). Setting this animates the indicator to the new position using smooth interpolation.
`Maximum`	int	radial.Maximum = 100; The upper limit of the progress range.
`ProgressType`	Enum	radial.ProgressType = SiticoneExpressiveRadialProgressType.Determinate; Determinate: Shows exact progress based on Value/Maximum. Indeterminate: Shows a spinning, expanding/contracting segment (for unknown wait times).
`IsRunning`	bool	radial.IsRunning = true; Starts or stops all internal timers (rotation, wave animation, value smoothing).

Appearance & Styling

Customize the visual track, colors, and line geometry.

Property	Type	Description & Usage Example
`Thickness`	float	radial.Thickness = 8f; The width of the progress line in pixels.
`ColorStyle`	Enum	radial.ColorStyle = SiticoneExpressiveRadialColorStyle.Solid; Solid: Uses `PrimaryColor`. Multicolor: Uses a gradient from `GradientColors`. Random: Smoothly morphs between random colors over time.
`PrimaryColor`	Color	radial.PrimaryColor = Color.Cyan; The main color of the progress bar (in Solid mode).
`TrackColor`	Color	radial.TrackColor = Color.FromArgb(40, Color.White); The background circle color. Set alpha to 0 for no track.
`GradientColors`	List<Color>	radial.GradientColors.Add(Color.Red); The collection of colors used when ColorStyle is Multicolor.

Expressive Animation

The "Expressive" aspect comes from the wave distortion applied to the circle and its rotational physics.

Property	Type	Description & Usage Example
`WaveAmplitude`	float	radial.WaveAmplitude = 5f; The height of the sine waves on the progress track. Note: The wave smooths out to 0 amplitude automatically when the progress reaches Maximum.
`WaveFrequency`	int	radial.WaveFrequency = 8; The number of wave peaks along the circle.
`RotationSpeed`	int	radial.RotationSpeed = 3; The speed at which the entire track rotates. Set to 0 for a static gauge.
`RotateDeterminate`	bool	radial.RotateDeterminate = true; If true, the track rotates even in Determinate mode (unless Value == Maximum).

Completion System

When Value hits Maximum, the control can trigger a "Success Sequence". This sequence handles visual transitions (Checkmarks, Values) and haptic visual feedback (Shake/Blink).

Property	Type	Description & Usage Example
`CompletionDisplayMode`	Enum	radial.CompletionDisplayMode = SiticoneExpressiveRadialCompletionDisplayMode.Checkmark; Determines what happens when finished: Nothing: Just fills the circle. Checkmark: Animates a success tick. Value: Shows the number (e.g., "100"). CheckmarkThenValue: Shows checkmark, fades out, shows value. ValueThenCheckmark: Shows value, fades out, shows checkmark.
`CheckmarkStyle`	Enum	radial.CheckmarkStyle = SiticoneExpressiveRadialCheckmarkStyle.Drawn; Drawn: Animates the lines drawing themselves. Smooth/Rounded: Fades in a pre-rendered shape.
`CompletionHaptics`	Enum	radial.CompletionHaptics = SiticoneExpressiveRadialHapticStyle.Shake; Visual feedback effect on completion: Shake: Rapidly vibrates the control. Blink: Flashes opacity. FadeOutIn: Smooth pulse.
`CompletionDelay`	int	radial.CompletionDelay = 800; Time in ms to hold the final state before settling or switching phases.

Theming

Use the ApplyTheme method or the Designer Smart Tag to instantly configure the control.

Property	Type	Description & Usage Example
`ApplyTheme(Theme)`	Method	radial.ApplyTheme(SiticoneExpressiveRadialTheme.NeonCyber); Applies a preset combination of Colors. Themes include: `MaterialBlue`, `Success`, `Error`, `DarkOcean`, `NeonPink`, `GradientSunset`, etc.

Public Methods

Clipboard Operations

// Copies the current configuration (Colors, Animation settings, Completion modes) to a static clipboard.
radial1.CopyUISettings();

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

Events

Lifecycle Events

// 1. Progress Changed
radial.ValueChanged += (s, e) => 
{
                Debug.WriteLine($"Progress: {e.New}%");
};

// 2. Completion Sequence Started
// Fired when Value hits Maximum and the checkmark/haptics begin.
radial.CompletionSequenceStarted += (s, e) => 
{
    lblStatus.Text = "Finishing up...";
};

// 3. Completion Sequence Ended
// Fired when all animations (checkmarks, fades, shakes) are totally done.
radial.CompletionSequenceEnded += (s, e) => 
{
    lblStatus.Text = "Done!";
                ProceedToNextStep();
};

Detailed Usage Examples

Example 1: File Upload with Success Checkmark

A standard determinate loader that shakes and shows a checkmark when the upload finishes.

C# - File Upload

public void SetupUploadProgress()
{
    radial.ProgressType = SiticoneExpressiveRadialProgressType.Determinate;
    radial.Maximum = 100;
    radial.Value = 0;
    
                // Styling
    radial.ApplyTheme(SiticoneExpressiveRadialTheme.MaterialBlue);
    radial.Thickness = 6f;
    
                // Completion: Shake and Draw Checkmark
    radial.CompletionDisplayMode = SiticoneExpressiveRadialCompletionDisplayMode.Checkmark;
    radial.CheckmarkStyle = SiticoneExpressiveRadialCheckmarkStyle.Drawn;
    radial.CompletionHaptics = SiticoneExpressiveRadialHapticStyle.Shake;
    
    radial.IsRunning = true;
}

// Call this as file uploads
public void UpdateProgress(int percent)
{
    radial.Value = percent; // If percent == 100, animation triggers automatically
}

Example 2: AI Processing (Indeterminate -> Success)

Used for tasks with unknown duration. It spins with a wave effect, then transitions to success state manually.

C# - Indeterminate Task

public async void StartAIProcessing()
{
                // Start in Indeterminate mode (spinning)
    radial.ProgressType = SiticoneExpressiveRadialProgressType.Indeterminate;
    radial.ApplyTheme(SiticoneExpressiveRadialTheme.NeonCyber);
    
                // Add heavy wave distortion for "AI" look
    radial.WaveAmplitude = 6f;
    radial.WaveFrequency = 12;
    radial.RotationSpeed = 5;
    radial.IsRunning = true;

                // Simulate work
                await Task.Delay(3000);

                // Switch to Determinate and Maximize to trigger success sequence
    radial.ProgressType = SiticoneExpressiveRadialProgressType.Determinate;
    radial.Value = 100; 
}

Example 3: Health/Stats Display

A static (non-rotating) gauge used to display stats, utilizing gradients.

C# - Health Gauge

public void SetupHealthGauge()
{
    radial.IsRunning = true; // Required for value smoothing
    radial.RotationSpeed = 0; // Stop rotation for a static gauge
    
                // Gradient Colors (Red -> Yellow -> Green)
    radial.ColorStyle = SiticoneExpressiveRadialColorStyle.Multicolor;
    radial.GradientColors = new List<Color> { Color.Red, Color.Yellow, Color.Lime };
    
                // Always show the value text
    radial.CompletionDisplayMode = SiticoneExpressiveRadialCompletionDisplayMode.Value;
    radial.ValueDisplayFont = new Font("Segoe UI", 16, FontStyle.Bold);
    
                // Disable completion haptics (it's just a gauge)
    radial.CompletionHaptics = SiticoneExpressiveRadialHapticStyle.None;
}