Siticone Circular Spinner

The SiticoneCircularSpinner is a dynamic, segmented loading indicator that offers a modern alternative to traditional progress bars. It features rotating "spokes" with customizable colors, gradients, shadows, and glow effects. Unique capabilities include task integration helper methods and smooth property animations for creating fluid UI transitions.

Core Animation & State

Properties controlling the fundamental motion of the spinner.

Property	Type	Description & Usage Example
`IsRunning`	bool	spinner.IsRunning = true; Starts or stops the rotation animation. Setting this to false pauses the spinner in its current position.
`RotationSpeed`	int	spinner.RotationSpeed = 30; The interval in milliseconds between rotation steps. Lower values create faster rotation (e.g., 10ms is very fast).
`RotationDirection`	RotationDirections	spinner.RotationDirection = RotationDirections.CounterClockwise; Sets the direction of spin: `Clockwise` (default) or `CounterClockwise`.
`UltraFastMode`	bool	spinner.UltraFastMode = true; Disables heavy visual effects (shadows, glows) to maximize frame rate on lower-end hardware.

Visual Customization

Configure the geometry and color palette of the spinner segments.

Property	Type	Description & Usage Example
`Colors`	Color[]	spinner.Colors = new Color[] { Color.Red, Color.Blue }; An array of colors applied to the spokes. The spinner cycles through these colors based on the `ColorMode`.
`ColorMode`	ColorModes	spinner.ColorMode = ColorModes.Gradient; `Solid`: Segments use distinct colors from the array. `Gradient`: Colors are blended smoothly across the spinner.
`LineThickness`	int	spinner.LineThickness = 6; The width of each spoke arc in pixels.
`NumberOfSpokes`	int	spinner.NumberOfSpokes = 12; The total number of segments in the circle.
`SegmentAngle`	float	spinner.SegmentAngle = 45f; The arc length of each spoke in degrees.
`StartingAngle`	int	spinner.StartingAngle = 90; Offsets the initial drawing position (0-360 degrees).

Effects & Overlay

Enhance depth and integrate the spinner with its background.

Property	Type	Description & Usage Example
`EnableShadow`	bool	spinner.EnableShadow = true; Adds a drop shadow to each spoke for a 3D effect. (Disabled in UltraFastMode).
`EnableGlow`	bool	spinner.EnableGlow = true; Adds a luminous outer glow to the spokes. (Disabled in UltraFastMode).
`BackgroundOverlayColor`	Color	spinner.BackgroundOverlayColor = Color.Black; Fills the control's background with a color overlay.
`BackgroundOverlayOpacity`	float	spinner.BackgroundOverlayOpacity = 0.5f; Transparency of the background overlay (0.0 to 1.0).

Progress Mode

Use the spinner as a determinate progress indicator.

Property	Type	Description & Usage Example
`Progress`	float	spinner.Progress = 0.75f; A value between 0.0 and 1.0. When set, only a portion of the spokes (e.g., 75%) will be drawn, allowing the spinner to act as a circular progress bar.

Control Methods

Programmatic methods for animation control and smooth property transitions.

Basic Control

// Pauses the animation at the current angle
spinner.Pause();

// Resumes animation from the paused state
spinner.Resume();

Property Animations

// Smoothly change the number of spokes over 1 second
// Useful for visual feedback when a process complexity changes
spinner.AnimateSegments(targetSpokes: 12, duration: 1000);

// Smoothly change rotation speed over 500ms
// Useful for indicating process acceleration or deceleration
spinner.AnimateRotationSpeed(targetSpeed: 10, duration: 500);

Task Integration

A specialized helper method to bind the spinner's lifecycle directly to a .NET Task.

C# - Async Task Binding

public async void PerformBackgroundWork()
{
                // 1. Define your long-running task
                var heavyTask = Task.Run(async () => 
    {
                await Task.Delay(3000); // Simulate work
                return "Done";
    });

                // 2. Bind the spinner to the task
                // The spinner will automatically Start() when called
                // and Stop() (setting Progress to 100%) when the task finishes.
    spinner.IntegrateWithTask(heavyTask);

                // 3. Await the result normally
                string result = await heavyTask;
}

Designer & Smart Tags

The SiticoneCircularSpinner includes a Smart Tag menu for applying themes and actions instantly.

Feature	Description
`Theme Presets`	Default: Rainbow gradient. Modern Blue: Professional blue gradient. Minimalist: Simple gray tones. Dark Mode: Optimized for dark backgrounds. Neon: Bright, high-contrast colors. Pastel: Soft, calming colors. Corporate: Business-friendly blue/teal. Flat Design: Solid, matte colors.
`Quick Actions`	Pause/Resume: Test animation state. Speed Up/Slow Down: Adjust rotation speed presets. Animate Spokes: Test smooth spoke transitions.

Detailed Usage Examples

Example 1: Dynamic Status Indicator

Changing the spinner's color and speed based on system status (e.g., Idle vs. Busy).

C# - Status Feedback

private void UpdateSystemStatus(SystemState state)
{
                switch (state)
    {
                case SystemState.Idle:
            spinner.Colors = new[] { Color.Gray };
            spinner.AnimateRotationSpeed(100, 500); // Slow down
                break;
            
                case SystemState.Processing:
            spinner.Colors = new[] { Color.DodgerBlue, Color.Cyan };
            spinner.ColorMode = ColorModes.Gradient;
            spinner.AnimateRotationSpeed(30, 500); // Normal speed
                break;
            
                case SystemState.Critical:
            spinner.Colors = new[] { Color.Red, Color.Orange };
            spinner.EnableGlow = true;
            spinner.AnimateRotationSpeed(10, 300); // Fast!
                break;
    }
}

Example 2: Custom Gradient Loader

Creating a brand-specific loading animation.

C# - Brand Styling

public void SetupBrandLoader()
{
                // Brand colors
    spinner.Colors = new Color[] 
    { 
                Color.FromArgb(108, 99, 255), // Brand Purple
                Color.FromArgb(255, 101, 132)  // Brand Pink
    };
    
    spinner.ColorMode = ColorModes.Gradient;
    spinner.NumberOfSpokes = 12;
    spinner.LineThickness = 5;
    spinner.SegmentAngle = 45; // Wide segments for smooth look
    
                // Add depth
    spinner.EnableShadow = true;
    spinner.EnableGlow = false;
}

Example 3: Manual Progress Control

Using the spinner as a circular progress step indicator.

C# - Step Progress

private void OnDownloadProgress(int percentage)
{
                // Stop rotation to use as a static gauge
    spinner.IsRunning = false;
    
                // Map 0-100 to 0.0-1.0
    spinner.Progress = percentage / 100f;
    
                // Optional: Rotate the whole spinner to indicate activity
                // while showing determinate progress
    spinner.StartingAngle += 5; 
}