Siticone ShimmerLabel
The SiticoneShimmerLabel is an eye-catching text control that renders a continuously moving gradient ("shimmer") effect over its text.
It is ideal for loading states (skeletons), drawing attention to important headers, or creating modern, dynamic UIs.
Appearance Properties
Customize the colors, opacity, and intensity of the shimmer effect.
| Property | Type | Description & Usage Example |
|---|---|---|
BaseColor |
Color | shimmer.BaseColor = Color.DimGray; The primary, static color of the text before the shimmer effect passes over it. |
ShimmerColor |
Color | shimmer.ShimmerColor = Color.White; The highlight color that moves across the text. |
ShimmerOpacity |
float | shimmer.ShimmerOpacity = 0.8f; The opacity of the shimmer highlight (0.0 to 1.0). Lower values make the effect more subtle. |
ShimmerWidth |
float | shimmer.ShimmerWidth = 0.3f; The width of the shimmer band relative to the text size (0.1 to 1.0). |
Animation Behavior
Control the speed, direction, and flow of the shimmer animation.
| Property | Type | Description & Usage Example |
|---|---|---|
ShimmerSpeed |
int | shimmer.ShimmerSpeed = 60; Controls how fast the shimmer moves (0-100). Higher values result in faster movement. |
Direction |
ShimmerDirection |
shimmer.Direction = ShimmerDirection.LeftToRight;
Sets the movement direction: LeftToRight or RightToLeft.
|
AutoReverse |
bool | shimmer.AutoReverse = true; If true, the shimmer reverses direction when it reaches the end, creating a "ping-pong" effect. |
PauseDuration |
int | shimmer.PauseDuration = 1000; Time in milliseconds to pause the animation after each cycle completes. |
IsAnimating |
bool | shimmer.IsAnimating = false; Master switch to start or stop the animation timer. |
IsPaused |
bool | shimmer.IsPaused = true; Temporarily freezes the animation at its current frame. |
Text & Fonts
Standard text properties extended with shimmer capabilities.
| Property | Type | Description & Usage Example |
|---|---|---|
Text |
string | shimmer.Text = "Loading..."; The content to display. |
Font |
Font | shimmer.Font = new Font("Segoe UI", 12f); The font style and size. |
ToolTipText |
string | shimmer.ToolTipText = "Please wait"; Text displayed when the user hovers over the control. |
Detailed Usage Examples
Example 1: Skeleton Loading Placeholder
Use the shimmer label to create a modern "loading" placeholder effect, similar to Facebook or LinkedIn.
private void ShowLoadingState()
{
shimmerTitle.Text = "████████████"; // Block characters for skeleton look
shimmerTitle.BaseColor = Color.FromArgb(224, 224, 224);
shimmerTitle.ShimmerColor = Color.White;
shimmerTitle.ShimmerSpeed = 40;
shimmerTitle.ShimmerWidth = 0.4f;
shimmerTitle.ShimmerOpacity = 0.6f;
shimmerTitle.IsAnimating = true;
}
private void ShowDataLoaded(string realTitle)
{
shimmerTitle.IsAnimating = false;
shimmerTitle.Text = realTitle;
shimmerTitle.BaseColor = Color.Black; // Reset to normal text color
}
Example 2: Eye-Catching Header
Create a gold shimmer effect to highlight premium features or headers.
private void SetupPremiumHeader()
{
lblPremium.Text = "PREMIUM MEMBER";
lblPremium.Font = new Font("Segoe UI", 14f, FontStyle.Bold);
// Gold Theme
lblPremium.BaseColor = Color.Goldenrod;
lblPremium.ShimmerColor = Color.LightYellow;
// Subtle, slow animation with pause
lblPremium.ShimmerSpeed = 25;
lblPremium.PauseDuration = 2000; // Wait 2s between shimmers
lblPremium.AutoReverse = false;
}
Example 3: Error Warning Pulse
Use a rapid red shimmer to indicate a critical error or warning.
private void ShowError(string message)
{
lblStatus.Text = message;
// High visibility red shimmer
lblStatus.BaseColor = Color.DarkRed;
lblStatus.ShimmerColor = Color.Red;
// Fast, ping-pong animation
lblStatus.ShimmerSpeed = 80;
lblStatus.AutoReverse = true;
lblStatus.ShimmerWidth = 0.5f;
lblStatus.IsAnimating = true;
}