Siticone Logo
Siticone UI
DOCS
v2025.12.15
Docs Circular Progress

Siticone Circular Progress

The SiticoneCircularProgress is a versatile gauge control for visualizing numeric values within a range. It supports modern design features such as gradients, customizable end caps, an inner circle background, and precision tick marks. With built-in smooth animation and an "Ultra Performance" mode, it handles everything from high-fidelity dashboards to resource-constrained monitoring interfaces.

Values & Range

Properties defining the data model of the gauge.

Property Type Description & Usage Example
Value float progress.Value = 75.5f; The current position of the indicator. Setting this triggers an animation unless UltraPerformanceMode is enabled.
MinimumValue float progress.MinimumValue = 0; The lower bound of the gauge's scale.
MaximumValue float progress.MaximumValue = 100; The upper bound of the gauge's scale.

Visual Appearance

Customize the stroke, colors, and shape of the progress arc.

Property Type Description & Usage Example
FillColor Color progress.FillColor = Color.DodgerBlue; The color of the active (filled) portion of the gauge when gradients are disabled.
TrackColor Color progress.TrackColor = Color.WhiteSmoke; The background color of the unfilled track.
GaugeThickness int progress.GaugeThickness = 15; The width of the progress arc in pixels.
CapStyle GaugeCapStyle progress.CapStyle = GaugeCapStyle.Round; Determines the shape of the arc ends. Options: Round or Flat.
StartAngle int progress.StartAngle = 270; The starting position in degrees. 270 is Top, 0 is Right, 90 is Bottom, 180 is Left.
SweepAngle int progress.SweepAngle = 360; The length of the arc in degrees. 360 creates a full circle; 180 creates a semi-circle.

Gradient Support

Enhance the visual appeal with smooth color transitions.

Property Type Description & Usage Example
GradientEnabled bool progress.GradientEnabled = true; Enables the gradient renderer. Note: Gradients are disabled in UltraPerformanceMode.
GradientColor1 Color progress.GradientColor1 = Color.Blue; The starting color of the gradient.
GradientColor2 Color progress.GradientColor2 = Color.Cyan; The ending color of the gradient.

Inner Circle & Ticks

Options for the center background and measurement scales.

Property Type Description & Usage Example
DrawInnerCircle bool progress.DrawInnerCircle = true; Fills the center of the gauge with a solid color.
InnerCircleColor Color progress.InnerCircleColor = Color.White;
ShowTicks bool progress.ShowTicks = true; Draws scale markers around the gauge track.
TickCount int progress.TickCount = 20; The total number of tick marks to display.
TickColor Color progress.TickColor = Color.Gray;

Value Display

Configuration for the central text label.

Property Type Description & Usage Example
ShowValue bool progress.ShowValue = true; Toggles the visibility of the central text.
ValueFont Font progress.ValueFont = new Font("Segoe UI", 20);
ValueFormat string progress.ValueFormat = "0.0"; Standard numeric format string (e.g., "0", "0.00").
UnitText string progress.UnitText = "%"; Suffix text appended to the formatted value.

Animation & Performance

Property Type Description & Usage Example
EnableAnimation bool progress.EnableAnimation = true; If true, value changes are animated smoothly. If false, the gauge snaps instantly to the new value.
AnimationSpeed int progress.AnimationSpeed = 15; Speed factor (1-100). Higher values result in faster transitions.
UltraPerformanceMode bool progress.UltraPerformanceMode = true; Critical for High Load: When enabled, disables animations, gradients, and ticks. Forces simple Flat caps. Use this when updating many gauges simultaneously.

Events

Hooks for monitoring state changes.

Event Handling
// Fires when the value changes (during animation or manual set)
progress.ValueChanged += (s, e) => 
{
                Console.WriteLine($"Value moved from {e.OldValue} to {e.NewValue}");
};

// Fires when the visual animation reaches the target value
progress.AnimationCompleted += (s, e) => 
{
                if (!e.AnimationInterrupted)
    {
                Console.WriteLine("Animation finished successfully!");
    }
};

Designer & Smart Tags

Integrated design-time support for rapid styling.

Feature Description
Theme Presets Instantly apply professional styles:
  • Modern Minimal: Clean, flat, single-color look.
  • CyberPop: High-contrast neon gradients with ticks.
  • Earthy Tone: Natural colors with rounded caps.
  • Classic Blue: Traditional progress bar styling.
Copy/Paste Settings Easily duplicate the exact visual configuration from one gauge to another.

Detailed Usage Examples

Example 1: Dashboard CPU Monitor

Creating a high-visibility gauge with gradient coloring.

C# - CPU Gauge
private void SetupCpuGauge()
{
    cpuGauge.MinimumValue = 0;
    cpuGauge.MaximumValue = 100;
    
                // Visuals
    cpuGauge.GradientEnabled = true;
    cpuGauge.GradientColor1 = Color.Cyan;
    cpuGauge.GradientColor2 = Color.Blue;
    cpuGauge.GaugeThickness = 20;
    cpuGauge.StartAngle = 180; // Start from left
    cpuGauge.SweepAngle = 180; // Semi-circle
    
                // Text
    cpuGauge.UnitText = "%";
    cpuGauge.ValueFormat = "0";
}

private void UpdateCpu(float usage)
{
                // Change color based on load
                if (usage > 80) 
        cpuGauge.GradientColor2 = Color.Red;
                else 
        cpuGauge.GradientColor2 = Color.Blue;
        
    cpuGauge.Value = usage;
}

Example 2: High-Performance Data Feed

Updating multiple gauges rapidly without UI lag using UltraPerformanceMode.

C# - Performance Mode
private void InitializeFastGauges()
{
                foreach (var gauge in _gaugeList)
    {
                // Disable expensive rendering features
        gauge.UltraPerformanceMode = true;
        
                // Visuals for speed
        gauge.ShowTicks = false;
        gauge.GradientEnabled = false;
        gauge.FillColor = Color.LimeGreen;
        gauge.CapStyle = SiticoneCircularProgress.GaugeCapStyle.Flat;
    }
}

private void OnHighFrequencyData(List<float> values)
{
                // Updates happen instantly without animation overhead
                for (int i = 0; i < values.Count; i++)
    {
        _gaugeList[i].Value = values[i];
    }
}