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:
|
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:
|
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
// 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();
Events
// 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.
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.
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.
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
public enum LoaderColorMode
{
Single, // Uses SingleColor property
Preset, // Cycles through PresetColors list
Infinite // Randomly generates colors
}
public enum LoaderSecondaryStyle
{
None, // No secondary effect
Pulse, // Scales scale up/down
Fade, // Opacity fades in/out
PulseAndFade // Both effects combined
}
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.