Siticone Logo
Siticone UI
DOCS
v2025.12.15
Docs Expressive Loader

Siticone Expressive Loader

The SiticoneExpressiveLoader is a highly customizable, indeterminate loading control that brings organic, fluid motion to your applications. Unlike standard spinners, it features physics-based inertia, organic shape morphing (e.g., circle to diamond to blob), and extensive theming capabilities. It supports secondary effects like pulsing and fading, making it suitable for modern, material-design inspired interfaces.

Animation & Behavior

Controls the core physics and visual style of the loader's movement.

Property Type Description & Usage Example
IsRunning bool loader.IsRunning = true; Starts or stops the animation. When stopped, the loader decelerates smoothly rather than freezing instantly.
Speed float loader.Speed = 1.5f; Multiplier for the animation speed. Default is 1.0f. Higher values create faster morphing and rotation.
Tension float loader.Tension = 0.5f; Controls the curve tension of the organic shape. Values closer to 0 make shapes sharper; values closer to 1 make them rounder/bloopier.
SecondaryStyle LoaderSecondaryStyle loader.SecondaryStyle = LoaderSecondaryStyle.Pulse; Adds secondary visual effects synced to the animation cycle:
  • None: Standard morphing.
  • Pulse: Scales size up and down.
  • Fade: Modulates opacity.
  • PulseAndFade: Combines both effects.

Appearance & Colors

Customize the colors, scaling, and container styling of the loader.

Property Type Description & Usage Example
ColorMode LoaderColorMode loader.ColorMode = LoaderColorMode.Preset; Determines how colors are selected during animation cycles:
  • Single: Uses SingleColor only.
  • Preset: Cycles through the PresetColors list.
  • Infinite: Generates random colors for every cycle.
SingleColor Color loader.SingleColor = Color.DodgerBlue; The primary color used when ColorMode is set to Single.
IsContained bool loader.IsContained = true; If true, draws a circular background container behind the morphing shape.
ContainedColor Color loader.ContainedColor = Color.FromArgb(20, 0, 0, 0); The color of the background container. Supports transparency.
ShapeOpacity float loader.ShapeOpacity = 0.8f; Controls the base opacity (0.1 to 1.0) of the morphing shape, allowing for glass-like effects.
ContentScale float loader.ContentScale = 0.7f; Scales the morphing shape relative to the control bounds (0.1 to 1.0). Useful for adding padding within the container.

Theming System

The control includes a built-in theming engine with over 30 presets. Setting the CurrentTheme property automatically configures colors, speeds, and styles.

Property Type Description & Usage Example
CurrentTheme EpressiveMTheme loader.CurrentTheme = EpressiveMTheme.CyberPunk; Instantly applies a predefined visual style. Popular themes include MaterialPurple, AndroidGreen, CyberPunk, and OceanBreeze.

Public Methods

Clipboard Operations
// Copies the current visual configuration (Colors, Speed, Tension, etc.) to a static clipboard.
loader1.CopyUISettings();

// Applies the settings from the clipboard to another instance.
// Useful for duplicating styles across different forms at runtime.
loader2.PasteUISettings();
These methods allow you to transfer complex configurations between loader instances programmatically or via the Designer.

Events

Handling Animation Cycles
// Occurs when the loader completes a full 360-degree morph cycle.
// This is useful for synchronizing other UI elements or counting progress.
loader.CycleCompleted += (s, e) => 
{
                // 'e' provides the total cycles completed and the current color
                Debug.WriteLine($"Cycle {e.TotalCycles} finished. Color: {e.CurrentColor}");
    
                if (e.TotalCycles >= 10)
    {
        loader.IsRunning = false; // Stop after 10 cycles
    }
};

// Occurs when IsRunning changes
loader.StateChanged += (s, e) => 
{
    lblStatus.Text = loader.IsRunning ? "Processing..." : "Idle";
};

Detailed Usage Examples

Example 1: Basic Material Loader

Configuring a standard material-design style loader with a purple theme.

C# - Material Style
public void SetupMaterialLoader()
{
    expressiveLoader1.IsRunning = true;
    
                // Use the built-in Material theme
    expressiveLoader1.CurrentTheme = EpressiveMTheme.MaterialPurple;
    
                // Customize slightly
    expressiveLoader1.ContentScale = 0.6f; // Make the shape smaller inside the container
    expressiveLoader1.Speed = 1.2f;        // Make it slightly faster
}

Example 2: Cyberpunk Pulse Effect

Creating a high-energy, neon-colored loader using the Preset color mode and Pulse secondary style.

C# - Custom Neon Style
public void SetupNeonLoader()
{
    expressiveLoader1.ColorMode = LoaderColorMode.Preset;
    
                // Define custom neon colors
    expressiveLoader1.PresetColors = new List<Color> 
    { 
                ColorTranslator.FromHtml("#F72585"), // Neon Pink
                ColorTranslator.FromHtml("#4CC9F0"), // Neon Blue
                ColorTranslator.FromHtml("#7209B7")  // Neon Purple
    };

                // Enable Pulse effect for "breathing" animation
    expressiveLoader1.SecondaryStyle = LoaderSecondaryStyle.Pulse;
    
                // High speed and high tension for sharper, faster morphs
    expressiveLoader1.Speed = 2.0f;
    expressiveLoader1.Tension = 0.8f;
    expressiveLoader1.IsContained = false; // No background container
}

Example 3: Infinite Random Colors

A playful configuration that generates a new random color for every shape morph cycle.

C# - Infinite Mode
public void SetupRandomLoader()
{
                // Infinite mode picks a random RGB color (range 40-220) every cycle
    expressiveLoader1.ColorMode = LoaderColorMode.Infinite;
    
                // Add a Fade effect so it ghosts in and out while changing colors
    expressiveLoader1.SecondaryStyle = LoaderSecondaryStyle.Fade;
    
                // Slow speed for a relaxing effect
    expressiveLoader1.Speed = 0.5f;
}

Enumerations

LoaderColorMode
public enum LoaderColorMode
{
    Single,     // Uses SingleColor property
    Preset,     // Cycles through PresetColors list
    Infinite    // Randomly generates colors
}
LoaderSecondaryStyle
public enum LoaderSecondaryStyle
{
    None,           // No secondary effect
    Pulse,          // Scales scale up/down
    Fade,           // Opacity fades in/out
    PulseAndFade    // Both effects combined
}
EpressiveMTheme (Selected)
public enum EpressiveMTheme
{
    Custom,
    MaterialPurple, MaterialDeepBlue, AndroidGreen, 
    CyberPunk, NeonLime, RoyalGold, IceCrystal,
    DraculaDark, OceanBreeze, HotPink, ... // (30+ themes available)
}

Designer Support

The SiticoneExpressiveLoader includes a Smart Tag panel in Visual Studio. You can access it by clicking the small arrow icon on the top-right of the control in the design view.

  • Theme Presets: Quickly apply themes like "CyberPunk" or "Android Green".
  • Clipboard Tools: Copy settings from one loader and paste them to another directly within the designer.
  • Live Properties: Tweak Speed, Tension, and Colors with immediate visual feedback.