Siticone Super Circle Progress Bar

The SiticoneSuperCircleProgressBar is a circular counterpart to the SuperProgressBar. It visualizes numeric values in a ring format, featuring physics-based momentum animations (accelerating/decelerating), rich gradient types (Rainbow, Animated), and event-driven milestones. It is ideal for stats, health bars, skill circles, or any metric best represented radially.

Values & Range

Properties defining the data model of the circular gauge.

Property	Type	Description & Usage Example
`Value`	double	circle.Value = 75.5; The target value. Setting this initiates a momentum-based animation to the new value.
`CurrentValue`	double	double val = circle.CurrentValue; Read-Only. Returns the actual animated value currently displayed.
`Minimum`	double	circle.Minimum = 0; The start value of the scale.
`Maximum`	double	circle.Maximum = 100; The end value of the scale.

Design & Styles

Customize the visual rendering of the circular track and progress arc.

Property	Type	Description & Usage Example
`DesignStyle`	CircleProgressDesignStyle	circle.DesignStyle = CircleProgressDesignStyle.RainBow; Solid: Single flat color. RainBow: Static multi-color gradient along the arc. Animated: Dynamic shifting colors that cycle through the arc.
`SolidColor`	Color	circle.SolidColor = Color.DodgerBlue; Primary color used in `Solid` mode.
`RainbowColors`	Color[]	circle.RainbowColors = new Color[] { Color.Red, Color.Blue }; Array of colors creating the static gradient in `RainBow` mode.
`AnimatedColors`	Color[]	circle.AnimatedColors = new Color[] { Color.Cyan, Color.Magenta }; Array of colors that cycle through the arc in `Animated` mode.
`ProgressThickness`	int	circle.ProgressThickness = 12; Width of the active progress arc in pixels.
`BaselineThickness`	int	circle.BaselineThickness = 8; Width of the background track circle in pixels.
`StartAngle`	float	circle.StartAngle = -90f; Starting position in degrees. -90 is top, 0 is right.
`Clockwise`	bool	circle.Clockwise = true; Direction of the progress fill.

Physics & Animation

Control the momentum and fluidity of value transitions.

Property	Type	Description & Usage Example
`AnimationSpeed`	double	circle.AnimationSpeed = 0.1; Base velocity factor. Higher values = faster movement.
`Damping`	double	circle.Damping = 0.85; Friction factor (0.1 to 0.99). Lower values cause overshoot/bounce; values closer to 1.0 are smoother.
`ColorAnimationSpeed`	double	circle.ColorAnimationSpeed = 0.02; Speed of the color cycling effect in `Animated` mode.

Center Text

Options for displaying the value in the center of the circle.

Property	Type	Description & Usage Example
`ShowValue`	bool	circle.ShowValue = true;
`ValueFont`	Font	circle.ValueFont = new Font("Segoe UI", 20, FontStyle.Bold);
`ValueFormat`	string	circle.ValueFormat = "0"; Numeric format string (e.g., "0.0", "N0").
`ValueSuffix`	string	circle.ValueSuffix = "%"; Text appended to the value.

Events

Hooks for monitoring progress state, animation steps, and milestones.

Event Wiring

// Value Changed Event
// Fires every animation tick with detailed state
circle.ValueChanged += (s, e) => 
{
                Console.WriteLine($"Animating: {e.CurrentAnimatedValue:F1} -> {e.NewValue:F1}");
};

// Progress Milestone Event
// Fires at 10%, 25%, 50%, 75%, 90%, 100% completion
circle.ProgressMilestone += (s, e) => 
{
                Console.WriteLine($"Reached {e.MilestonePercent}% Milestone!");
};

// Animation State Changed
// Track momentum phases (Accelerating, Decelerating, Stopped)
circle.AnimationStateChanged += (s, e) => 
{
                Console.WriteLine($"Phase: {e.NewState}");
};

// Paint Events
// Custom drawing before/after the circle is rendered
circle.AfterProgressPaint += (s, e) => 
{
                // Draw a custom icon in the center
    e.Graphics.DrawImage(myIcon, e.CircleBounds); 
};

Designer & Smart Tags

Visual Studio design-time support for rapid styling.

Feature Category	Capabilities
`Theme Presets`	Instant styling configurations: Modern Blue: Clean, corporate blue circle. Rainbow Ring: Full spectrum gradient. Neon Pulse: Animated bright colors. Fitness Ring: Apple Health-style gradient. Data Usage: Warning/Critical color logic. Minimal: Thin, subtle grey/blue. High Contrast: Black/White for visibility.
`Quick Values`	Set to 25% / 50% / 75% / 100%: Quickly preview fill levels.
`Settings`	Copy/Paste Settings: Replicate configurations across multiple controls.

Detailed Usage Examples

Example 1: File Upload Indicator

Using the Animated style to indicate active processing.

C# - Upload Progress

private void SetupUploadCircle()
{
    uploadCircle.DesignStyle = CircleProgressDesignStyle.Animated;
    uploadCircle.AnimatedColors = new[] { Color.Cyan, Color.Blue, Color.Purple };
    uploadCircle.ColorAnimationSpeed = 0.03; // Fast cycle
    
    uploadCircle.ProgressThickness = 15;
    uploadCircle.ValueSuffix = "%";
}

private void OnUploadProgress(int percentage)
{
    uploadCircle.Value = percentage;
    
                if (percentage >= 100)
    {
        uploadCircle.DesignStyle = CircleProgressDesignStyle.Solid;
        uploadCircle.SolidColor = Color.LimeGreen;
    }
}

Example 2: Fitness Goal Ring

Creating a "Health" style ring that fills up as steps are counted.

C# - Fitness Ring

private void SetupStepCounter()
{
    stepCircle.Maximum = 10000; // 10k steps goal
    stepCircle.StartAngle = -90;
    
    // Gradient like Apple Watch
    stepCircle.DesignStyle = CircleProgressDesignStyle.RainBow;
    stepCircle.RainbowColors = new[] { Color.FromArgb(250, 17, 79), Color.FromArgb(250, 200, 0) };
    
    stepCircle.ProgressThickness = 20;
    stepCircle.BaselineThickness = 20;
    stepCircle.BaselineColor = Color.FromArgb(50, 0, 0, 0); // Semi-transparent track
    
    stepCircle.ValueFormat = "N0";
    stepCircle.ValueSuffix = "\nSteps"; // Newline for layout
}

Example 3: Custom Icon Drawing

Drawing an icon in the center instead of text using the Paint event.

C# - Custom Center

public Form1()
{
    iconCircle.ShowValue = false; // Hide default text
    iconCircle.AfterProgressPaint += IconCircle_Paint;
}

private void IconCircle_Paint(object sender, CircleProgressPaintEventArgs e)
{
                Image icon = Properties.Resources.DownloadIcon;
    
                // Center the image
                int x = e.FullBounds.X + (e.FullBounds.Width - icon.Width) / 2;
                int y = e.FullBounds.Y + (e.FullBounds.Height - icon.Height) / 2;
    
    e.Graphics.DrawImage(icon, x, y);
}