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
// 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);
}
Events
Events to handle animation cycles and state changes.
// 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
public enum LoaderColorMode
{
// Uses SingleColor property only. No color transitioning.
Single,
// Cycles through the PresetColors list smoothly.
Preset,
// Generates random colors continuously.
Infinite
}
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
}
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.
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.
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.
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.
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. |