Siticone Logo
Siticone UI
DOCS
v2025.12.15
Review Videos Contact Pricing
Docs Smooth Linear Progress

Siticone Smooth Linear Progress

The SiticoneSmoothLinearProgress is a highly fluid, indeterminate progress indicator. Unlike standard marquees, it simulates organic motion using randomized speed variations and "breathing" segment lengths. It supports single or dual-bar modes, creating a sophisticated, modern loading experience perfect for uncertain wait times.

Core Animation

Properties controlling the fundamental movement and state of the progress bar.

Property Type Description & Usage Example
IsAnimating bool progressBar.IsAnimating = true; Starts or pauses the animation loop. Setting this to false freezes the bar in its current position.
AnimationSpeed float progressBar.AnimationSpeed = 300f; The base velocity of the moving segment in pixels per second. The actual speed fluctuates randomly around this value for a natural feel.
ReverseDirection bool progressBar.ReverseDirection = true; When true, the primary animation flow moves from right to left instead of left to right.

Dual-Bar Mode

Enable a secondary progress indicator for a more complex and engaging visual effect.

Property Type Description & Usage Example
AllowAlternateMode bool progressBar.AllowAlternateMode = true; Activates the secondary progress bar, creating two moving segments that can move in sync or opposition.
AllowSharedPath bool progressBar.AllowSharedPath = true; If true, both bars travel along the same vertical center line. If false, they are offset vertically to run on parallel tracks.

Breathing & Segments

The "breathing" effect refers to the rhythmic expansion and contraction of the progress segment length.

Property Type Description & Usage Example
OscillationSpeed float progressBar.OscillationSpeed = 0.5f; Controls the frequency of the length change cycle. Higher values create a rapid "pulse", while lower values create a slow "breath".
SegmentMinLength float progressBar.SegmentMinLength = 20f; The shortest possible length (in pixels) the bar will shrink to during animation.
SegmentMaxLength float progressBar.SegmentMaxLength = 150f; The longest possible length (in pixels) the bar will stretch to during animation.

Visual Appearance

Customize the colors and dimensions of the progress indicators.

Property Type Description & Usage Example
PrimaryColor Color progressBar.PrimaryColor = Color.DodgerBlue; The color of the main progress segment.
SecondaryColor Color progressBar.SecondaryColor = Color.Cyan; The color of the second segment (visible only when AllowAlternateMode is true).
StrokeThickness int progressBar.StrokeThickness = 6; The height/thickness of the progress lines in pixels.

Control Methods

Programmatic control over the animation lifecycle.

Animation Control 
// Starts the animation loop if it isn't running
progressBar.StartAnimation();

// Pauses the animation at the current frame
progressBar.StopAnimation();

// Stops animation and resets all internal counters (elapsed time, position) to zero
progressBar.ResetAnimation();

Designer & Smart Tags

The component includes a comprehensive Smart Tag menu for rapid visual configuration.

Feature Category Capabilities
Theme Presets Instantly apply professional animation styles:
  • Default Blue: Standard smooth single bar.
  • Dual Color: Two distinct colors moving in tandem.
  • Neon Pulse: High-contrast, fast-moving bars.
  • Earthy Sunset: Slow, warm-toned relaxation animation.
  • Cool Metal: sleek, professional gray/blue dual bars.
  • Vibrant Festival: Bright Red/Blue with high oscillation.
  • Serenity: Very slow, calming teal motion.
Settings Copy/Paste Settings: Easily duplicate the exact configuration from one progress bar to another.

Detailed Usage Examples

Example 1: Indeterminate Search Bar

Creating a subtle loading effect below a search box while fetching results.

C# - Search Loading 
private async void txtSearch_KeyDown(object sender, KeyEventArgs e)
{
                if (e.KeyCode == Keys.Enter)
    {
                // Show and start loader
        loaderBar.Visible = true;
        loaderBar.ResetAnimation();
        
                // Configure for subtle effect
        loaderBar.StrokeThickness = 2;
        loaderBar.PrimaryColor = Color.FromArgb(0, 120, 215);
        loaderBar.AllowAlternateMode = false;
        
                await PerformSearchAsync(txtSearch.Text);
        
                // Hide when done
        loaderBar.Visible = false;
        loaderBar.StopAnimation();
    }
}

Example 2: "Busy" System State

Using Dual-Bar mode to indicate high system activity or critical processing.

C# - Busy State 
private void SetBusyState(bool isBusy)
{
                if (isBusy)
    {
                // High activity configuration
        busyBar.AllowAlternateMode = true;
        busyBar.AllowSharedPath = false; // Parallel tracks
        busyBar.PrimaryColor = Color.Orange;
        busyBar.SecondaryColor = Color.Red;
        
                // Fast, erratic movement
        busyBar.AnimationSpeed = 400f; 
        busyBar.OscillationSpeed = 1.5f; 
        
        busyBar.StartAnimation();
    }
                else
    {
        busyBar.StopAnimation();
    }
}

Example 3: Custom "Breathing" Divider

Using the control as a decorative, animated separator between UI sections.

C# - Decorative Divider 
private void SetupDivider()
{
                // Slow, calming settings
    dividerBar.StrokeThickness = 1;
    dividerBar.PrimaryColor = Color.LightGray;
    
                // Very slow movement
    dividerBar.AnimationSpeed = 50f; 
    
                // Long segments that slowly expand/contract
    dividerBar.SegmentMinLength = 100f;
    dividerBar.SegmentMaxLength = 300f;
    dividerBar.OscillationSpeed = 0.2f;
    
    dividerBar.StartAnimation();
}