Siticone Logo
Siticone UI
DOCS
v2025.12.15
Review Videos Contact Pricing
Docs Smooth Circular Spinner

Siticone Smooth Circular Spinner

The SiticoneSmoothCircularSpinner is a fluid, modern loading indicator designed to provide a seamless visual experience. Unlike traditional segmented spinners, this control features a continuous, oscillating arc that smoothly expands and contracts as it rotates. It is perfect for applications requiring a sophisticated, high-fidelity waiting state.

Core Animation & State

Properties controlling the fundamental motion and activity of the spinner.

Property Type Description & Usage Example
IsAnimating bool spinner.IsAnimating = true; Starts or stops the animation loop. When false, the spinner freezes in its current state.
RotationSpeed float spinner.RotationSpeed = 480f; The rotational velocity in degrees per second. Higher values result in faster spinning.
ReverseDirection bool spinner.ReverseDirection = true; When enabled, reverses the rotation from clockwise to counter-clockwise.

Oscillation Dynamics

A unique feature of this spinner is the "breathing" arc length. These properties control how the arc expands and contracts during rotation.

Property Type Description & Usage Example
OscillationSpeed float spinner.OscillationSpeed = 0.5f; Controls the frequency of the expansion/contraction cycle. Higher values create rapid pulsing.
ArcMinLength float spinner.ArcMinLength = 20f; The minimum length (in degrees) the arc will shrink to during its cycle.
ArcMaxLength float spinner.ArcMaxLength = 270f; The maximum length (in degrees) the arc will stretch to during its cycle.

Visual Appearance

Customize the stroke width and color of the spinning arc.

Property Type Description & Usage Example
StrokeColor Color spinner.StrokeColor = Color.DodgerBlue; The single color used to draw the spinner arc.
StrokeThickness int spinner.StrokeThickness = 6; The width of the arc line in pixels. Larger values create a bolder look.

Control Methods

Programmatic control over the animation lifecycle.

Animation Control 
// Starts the animation from the beginning (angle 0)
spinner.StartAnimation();

// Stops the animation and resets the angle to 0
spinner.StopAnimation();

Designer & Smart Tags

The component includes a comprehensive Smart Tag menu for rapid visual configuration.

Feature Category Capabilities
Theme Presets Instantly apply professional animation styles:
  • Default Blue: Standard smooth rotation.
  • Material Green: Google Material style animation.
  • Subtle Gray: Slow, thin loading indicator.
  • Bold Orange: Thick, high-visibility spinner.
  • Purple Pulse: Fast oscillation effect.
  • Red Minimalist: Very thin, understated line.
  • Teal Smooth: Gentle, fluid motion.
  • Indigo Slow: Relaxed, wide-arc rotation.
  • Pink Fast: High-speed, energetic spinner.
  • Cyan Long Arc: Maintains a long arc length.
Settings Copy/Paste Settings: Easily duplicate the exact configuration from one spinner to another.

Detailed Usage Examples

Example 1: Async Operation Indicator

Using the spinner to indicate background work during a login process.

C# - Login Flow 
private async void BtnLogin_Click(object sender, EventArgs e)
{
                // Show and start spinner
    loginSpinner.Visible = true;
    loginSpinner.IsAnimating = true;
    btnLogin.Enabled = false;

                try
    {
                // Simulate network request
                await Task.Delay(2000); 
                // Perform actual login logic here
    }
                finally
    {
                // Hide and stop
        loginSpinner.IsAnimating = false;
        loginSpinner.Visible = false;
        btnLogin.Enabled = true;
    }
}

Example 2: Custom "Breathing" Effect

Configuring the oscillation parameters to create a slow, deep breathing effect.

C# - Breathing Animation 
private void SetupBreathingSpinner()
{
    breathSpinner.StrokeColor = Color.LightSkyBlue;
    breathSpinner.StrokeThickness = 4;
    
                // Slow rotation
    breathSpinner.RotationSpeed = 120f; 
    
                // Slow, deep oscillation
    breathSpinner.OscillationSpeed = 0.2f;
    
                // Wide range of expansion
    breathSpinner.ArcMinLength = 45f;
    breathSpinner.ArcMaxLength = 300f;
    
    breathSpinner.IsAnimating = true;
}

Example 3: High-Alert Spinner

Creating a fast, urgent indicator for critical operations.

C# - Alert Style 
private void SetupCriticalSpinner()
{
    alertSpinner.StrokeColor = Color.Red;
    alertSpinner.StrokeThickness = 8;
    
                // Fast rotation
    alertSpinner.RotationSpeed = 720f; 
    
                // Rapid, short pulses
    alertSpinner.OscillationSpeed = 2.0f;
    alertSpinner.ArcMinLength = 20f;
    alertSpinner.ArcMaxLength = 180f;
    
                // Counter-clockwise for "undo" or "alert" feel
    alertSpinner.ReverseDirection = true;
    
    alertSpinner.IsAnimating = true;
}