Siticone Logo
Siticone UI
DOCS
v2025.12.15
Docs Morph Loader

Siticone Morph Loader

The SiticoneMorphLoader is a highly customizable, indeterminate loading control. Unlike standard progress bars, it features organic shape morphing, physics-based inertia, and extensive theming capabilities. It is designed to provide a modern, fluid visual indicator for background operations.

Material Animation

Properties controlling the physics, speed, and animation state of the loader.

Property Type Description & Usage Example
IsRunning bool loader.IsRunning = true; Starts or stops the animation loop. When false, the loader gently slows down using inertia before stopping.
Speed float loader.Speed = 1.5f; Multiplier for the animation speed. Default is 1.0. Higher values make the shape morph and rotate faster.
SecondaryStyle LoaderSecondaryStyle loader.SecondaryStyle = LoaderSecondaryStyle.Pulse; Applies secondary effects like Pulse (scaling) or Fade (opacity oscillation) on top of the standard morph animation.

Appearance & Color

Settings to define the color palette, theming, and coloring strategies.

Property Type Description & Usage Example
ColorMode LoaderColorMode loader.ColorMode = LoaderColorMode.Preset; Determines how colors are selected. Options: Single (static color), Preset (cycles through a list), or Infinite (random generation).
SingleColor Color loader.SingleColor = Color.DodgerBlue; The primary color used when ColorMode is set to Single.
PresetColors List<Color> loader.PresetColors.Add(Color.Red); The collection of colors to cycle through when ColorMode is set to Preset. The loader transitions smoothly between these colors.
CurrentTheme MorphTheme loader.CurrentTheme = MorphTheme.CyberPunk; Quickly applies a pre-defined visual theme (colors, speeds, and effects) from the extensive built-in library.

Geometry & Shape

Controls the physical properties of the organic shape, including its fluid tension and scale.

Property Type Description & Usage Example
Tension float loader.Tension = 0.5f; Controls the curve tension of the shape. 0.0 results in straight lines (polygons), while values around 0.5 create smooth, organic blobs.
ContentScale float loader.ContentScale = 0.7f; Scales the morphing shape relative to the control's bounds. Useful to prevent the shape from clipping edges during wild morphs.
EnforceSquare bool loader.EnforceSquare = true; If true, forces the control to maintain a 1:1 aspect ratio, ensuring the loading shape remains perfectly circular/symmetrical.
ShapeOpacity float loader.ShapeOpacity = 0.8f; The master opacity of the rendered shape (0.0 to 1.0).
InternalMargin int loader.InternalMargin = 5; Padding in pixels between the edge of the control and the drawing area.

Container

Options for drawing a background container behind the morphing shape.

Property Type Description & Usage Example
IsContained bool loader.IsContained = true; If true, draws a static circular background behind the animation.
ContainedColor Color loader.ContainedColor = Color.WhiteSmoke; The color of the background container circle.

Public Methods

ApplyTheme(MorphTheme)
// Applies a predefined theme to the loader at runtime.
// This automatically configures colors, speed, tension, and container settings.
public void SetupLoader()
{
                // Apply the "CyberPunk" theme: Neon colors, high speed
    siticoneMorphLoader1.ApplyTheme(MorphTheme.CyberPunk);
}
Use this method to switch visual styles dynamically, for example, when your application changes modes.

Events

Events to handle animation cycles and state changes.

Events Wiring
// 1. CycleCompleted Event
// Fires every time the loader completes a full 360-degree rotation/morph cycle.
// Provides the current color and total cycles count.
loader.CycleCompleted += (s, e) => 
{
                Debug.WriteLine($"Cycle {e.TotalCycles} finished. Color: {e.CurrentColor}");
    
                // Example: Change label text every 5 cycles
                if (e.TotalCycles % 5 == 0)
    {
        lblStatus.Text = "Still loading...";
    }
};

// 2. StateChanged Event
// Fires when IsRunning changes (Started or Stopped).
loader.StateChanged += (s, e) => 
{
                if (loader.IsRunning)
        lblStatus.Text = "Processing...";
                else
        lblStatus.Text = "Paused";
};

Enumerations

LoaderColorMode Enum
public enum LoaderColorMode
{
                // Uses SingleColor property only. No color transitioning.
    Single,
    
                // Cycles through the PresetColors list smoothly.
    Preset,
    
                // Generates random colors continuously.
    Infinite
}
LoaderSecondaryStyle Enum
public enum LoaderSecondaryStyle
{
                // Standard morphing only.
    None,
    
                // Adds a rhythmic scale pulsing effect.
    Pulse,
    
                // Adds an opacity fade in/out effect.
    Fade,
    
                // Combines both Pulse and Fade effects.
    PulseAndFade
}
MorphTheme Enum (Partial List)
public enum MorphTheme
{
    Custom,
    MaterialPurple, 
    AndroidGreen, 
    DarkNight,
    CyberPunk, 
    OceanBreeze, 
    HotPink, 
    RoyalGold, 
    DraculaDark,
                // ... and many more
}

Detailed Usage Examples

Example 1: Basic Setup

A simple configuration for a single-color loader suitable for light themes.

C# - Single Color Loader
private void InitializeLoader()
{
    siticoneMorphLoader1.IsRunning = true;
    siticoneMorphLoader1.ColorMode = LoaderColorMode.Single;
    siticoneMorphLoader1.SingleColor = Color.FromArgb(103, 80, 164); // Purple
    siticoneMorphLoader1.Speed = 1.0f;
    siticoneMorphLoader1.Tension = 0.5f; // Smooth organic shape
}

Example 2: Custom Color Cycle (Google-Style)

Configures the loader to cycle through specific brand colors (Blue, Red, Yellow, Green) similar to Google's loading indicators.

C# - Custom Presets
private void SetupGoogleStyleLoader()
{
                // 1. Set mode to Preset
    loader.ColorMode = LoaderColorMode.Preset;
    
                // 2. Clear default presets and add custom brand colors
    loader.PresetColors.Clear();
    loader.PresetColors.Add(Color.FromArgb(66, 133, 244)); // Blue
    loader.PresetColors.Add(Color.FromArgb(234, 67, 53));  // Red
    loader.PresetColors.Add(Color.FromArgb(251, 188, 5));  // Yellow
    loader.PresetColors.Add(Color.FromArgb(52, 168, 83));  // Green

                // 3. Add a Pulse effect for extra emphasis
    loader.SecondaryStyle = LoaderSecondaryStyle.Pulse;
    loader.Speed = 1.2f;
}

Example 3: Physics Inertia Stop

Demonstrates how the loader handles stopping. Unlike standard controls that vanish or freeze, the MorphLoader uses physics to slow down gradually (inertia) when IsRunning is set to false.

C# - Inertia Handling
private async void ProcessData_Click(object sender, EventArgs e)
{
                // Start animation instantly
    loader.IsRunning = true;
    loader.Visible = true;

                // Simulate work
                await Task.Delay(3000);

                // Stop animation. 
                // The loader will NOT stop instantly. It will decelerate 
                // organically over the next few frames based on physics.
    loader.IsRunning = false; 
}

Example 4: Theme Integration

Using the built-in themes to quickly match specific aesthetics, like a dark mode dashboard.

C# - Applying Themes
public void ApplyDarkMode()
{
                // "DraculaDark" theme sets a dark container background 
                // and neon pastel colors for the shape.
    loader.ApplyTheme(MorphTheme.DraculaDark);
    
                // You can override specific properties AFTER applying a theme
    loader.ContentScale = 0.85f; // Make it slightly larger
}

Designer Experience & Smart Tags

The SiticoneMorphLoader includes a Smart Tag panel in Visual Studio for rapid configuration.

Feature Description
Theme Presets Right-click the control or use the Smart Tag to select from themes like Material Purple, CyberPunk, Android Green, and more. This instantly configures colors and geometry.
Clipboard Tools Copy UI Settings: Copies the current visual configuration (Colors, Speed, Tension) to a static clipboard.
Paste UI Settings: Applies the copied settings to another MorphLoader instance, making it easy to duplicate styles across forms.