Siticone Logo
Siticone UI
DOCS
v2025.12.15
Docs Circular Progress Meter

Siticone Circular Progress Meter

The SiticoneCircularProgressMeter is an advanced circular gauge control designed for monitoring values against specific thresholds. Unlike standard progress bars, it features physics-based animations (Bounce, Elastic), logic-driven color states (Warning, Critical), and advanced visual effects like glow and pulse.

Values & Range

Properties defining the data model of the meter.

Property Type Description & Usage Example
Value double meter.Value = 85.5; The current target value. Setting this property initiates the transition animation to the new value.
MinimumValue double meter.MinimumValue = 0; The lower bound of the meter scale.
MaximumValue double meter.MaximumValue = 200; The upper bound of the meter scale.

Thresholds & States

Define logic for automatic color changes based on value severity.

Property Type Description & Usage Example
EnableWarningThreshold bool meter.EnableWarningThreshold = true; Enables the warning state logic.
WarningThreshold double meter.WarningThreshold = 75; The value at which the meter switches to the WarningColor.
WarningColor Color meter.WarningColor = Color.Orange; The color applied when the value exceeds the warning threshold.
EnableCriticalThreshold bool meter.EnableCriticalThreshold = true; Enables the critical state logic.
CriticalThreshold double meter.CriticalThreshold = 90; The value at which the meter switches to the CriticalColor.
CriticalColor Color meter.CriticalColor = Color.Red; The color applied when the value exceeds the critical threshold.

Design & Styles

Customize the visual rendering mode and indicator elements.

Property Type Description & Usage Example
DesignStyle DesignStyle meter.DesignStyle = ProgressMeterDesignStyle.Glow; Solid: Flat single color.
Gradient: Smooth fade between Primary and Secondary colors.
Pulse: Color brightness oscillates.
Glow: Draws blurred layers for a neon effect.
IndicatorStyle IndicatorStyle meter.IndicatorStyle = ProgressMeterIndicatorStyle.Arrow; Adds a visual pointer: None, Dot, Arrow, or Line.
PrimaryColor Color meter.PrimaryColor = Color.DodgerBlue;
SecondaryColor Color meter.SecondaryColor = Color.Cyan; Used for gradients.
TrackThickness int meter.TrackThickness = 10;
ProgressThickness int meter.ProgressThickness = 15;

Physics & Effects

Properties that control the "feel" of the value transition.

Property Type Description & Usage Example
AnimationMode AnimationMode meter.AnimationMode = ProgressMeterAnimationMode.Elastic; None: Instant jump.
Smooth: Linear interpolation.
Elastic: Overshoots slightly before settling.
Bounce: Bounces at the target value.
Elasticity double meter.Elasticity = 0.8; Controls the spring effect strength (0.1 to 1.0). Higher is bouncier.
AnimationSpeed double meter.AnimationSpeed = 0.15; Base speed factor. Lower values are slower.
EnablePulse bool meter.EnablePulse = true; Makes the active color breathe/pulse continuously.
EnableGlow bool meter.EnableGlow = true; Adds a blurred glow effect around the progress arc.

Text Display

Customize the labels rendered in the center of the meter.

Property Type Description & Usage Example
ShowValue bool meter.ShowValue = true;
ValueFormat string meter.ValueFormat = "0.0"; Standard format string for numbers.
ValueSuffix string meter.ValueSuffix = " MPH";
ShowLabel bool meter.ShowLabel = true;
LabelText string meter.LabelText = "Velocity"; Descriptive text displayed below the numeric value.

Events

Hooks for monitoring thresholds and animation states.

Event Wiring
// Threshold Reached Event
// Fires when value crosses Warning or Critical thresholds.
meter.ThresholdReached += (s, e) => 
{
                if (e.IsCritical)
    {
                Console.WriteLine($"CRITICAL ALERT: {e.ThresholdName} reached at {e.CurrentValue}!");
                // Example: Play alarm sound
                SystemSounds.Hand.Play();
    }
};

// Value Changed Event
// Fires during animation steps.
meter.ValueChanged += (s, e) => 
{
                // e.CurrentAnimatedValue contains the interpolated frame value
                Console.WriteLine($"Animating... {e.CurrentAnimatedValue:0.0}");
};

Designer & Smart Tags

The SiticoneCircularProgressMeter includes a comprehensive Smart Tag menu for rapid setup.

Feature Category Capabilities
Theme Presets One-click configurations:
  • Battery Meter: Gradient green-to-red logic.
  • Speedometer: Glow effect with Arrow indicator.
  • Memory Usage: Teal gradient with data suffix.
  • Volume Control: Bounce animation with solid fill.
Test Actions Test Animation: Previews the easing/physics in the designer.
Test Thresholds: Simulates warning/critical states.

Detailed Usage Examples

Example 1: Server Load Monitor

Using thresholds to visually indicate server health status.

C# - Health Monitor
private void SetupServerMonitor()
{
    serverMeter.MinimumValue = 0;
    serverMeter.MaximumValue = 100;
    
                // Logic
    serverMeter.EnableWarningThreshold = true;
    serverMeter.WarningThreshold = 75;
    serverMeter.WarningColor = Color.Orange;
    
    serverMeter.EnableCriticalThreshold = true;
    serverMeter.CriticalThreshold = 90;
    serverMeter.CriticalColor = Color.Red;
    
                // Visuals
    serverMeter.DesignStyle = ProgressMeterDesignStyle.Glow;
    serverMeter.AnimationMode = ProgressMeterAnimationMode.Elastic;
    serverMeter.LabelText = "CPU Load";
}

private void OnTimerTick(object sender, EventArgs e)
{
                // Update value - Colors change automatically based on thresholds
    serverMeter.Value = GetCpuUsage();
}

Example 2: File Download Progress

Using the meter for a smooth, high-performance download indicator.

C# - Download Progress
private void SetupDownloadMeter()
{
    dlMeter.DesignStyle = ProgressMeterDesignStyle.Gradient;
    dlMeter.PrimaryColor = Color.DeepSkyBlue;
    dlMeter.SecondaryColor = Color.BlueViolet;
    
                // Performance optimization for rapid updates
    dlMeter.UltraFastPerformance = false; // Keep true if updates > 60fps
    dlMeter.AnimationMode = ProgressMeterAnimationMode.Smooth;
    
    dlMeter.UnitText = "%";
    dlMeter.LabelText = "Downloading...";
}

private void OnProgressChanged(int percentage)
{
    dlMeter.Value = percentage;
    
                if (percentage >= 100)
    {
        dlMeter.LabelText = "Complete";
        dlMeter.PrimaryColor = Color.LimeGreen;
        dlMeter.SecondaryColor = Color.Green;
    }
}