ProgressBar

A progress bar control with gradient fill and a configurable Vista-style shimmer pulse that sweeps left-to-right across the filled portion of the bar. Supports determinate, indeterminate, text overlay, and timed/value-triggered pulse animations.

• 
• 

Frameworks

.NET MAUI

Blazor

Features

• Gradient Fill — Linear gradient from GradientStartColor to GradientEndColor across the filled bar.
• Vista-Style Shimmer Pulse — A translucent highlight sweeps left-to-right across the bar. Configurable width (PulseLength) and speed (PulseSpeed).
• Pulse Triggers — Pulse on every value change (PulseOnValueChange) or on a repeating timer (PulseInterval).
• Text Overlay — Show percentage or custom-formatted text centered on the bar.
• Indeterminate Mode — A sliding bar animation for unknown progress.
• Standard Properties — Value, Minimum, Maximum, TrackColor, BarColor, TrackHeight, CornerRadius.

Basic Usage

.NET MAUI

<shiny:ProgressBar Value="{Binding Progress}"
                   TrackHeight="12"
                   CornerRadius="6"
                   UseGradient="True"
                   GradientStartColor="#3B82F6"
                   GradientEndColor="#8B5CF6"
                   PulseEnabled="True"
                   PulseOnValueChange="True"
                   PulseLength="0.4"
                   PulseSpeed="800" />

Blazor

<ProgressBar Value="@progress"
             TrackHeight="12"
             CornerRadius="6px"
             UseGradient="true"
             GradientStartColor="#3B82F6"
             GradientEndColor="#8B5CF6"
             PulseEnabled="true"
             PulseOnValueChange="true"
             PulseLength="0.4"
             PulseSpeed="800" />

Properties

Property	Type (MAUI / Blazor)	Default	Description
Value	double	0	Current progress value (TwoWay)
Minimum	double	0	Minimum value
Maximum	double	100	Maximum value
TrackColor	Color / string	#E5E7EB	Background track color
BarColor	Color / string	#3B82F6	Fill color when gradient is disabled
TrackHeight	double	8	Track height in pixels
CornerRadius	double / string	4 / “4px”	Corner radius
UseGradient	bool	false	Enable gradient fill
GradientStartColor	Color / string	#3B82F6	Left gradient color
GradientEndColor	Color / string	#8B5CF6	Right gradient color
PulseEnabled	bool	false	Enable shimmer pulse
PulseOnValueChange	bool	true	Trigger pulse when Value changes
PulseInterval	TimeSpan	0	Repeating pulse timer (e.g. 2 seconds)
PulseColor	Color / string	White / “rgba(255,255,255,0.4)“	Shimmer color
PulseOpacity	double	0.4	Peak shimmer opacity (MAUI only)
PulseLength	double	0.4	Width of shimmer as fraction of fill (0.05–1.0)
PulseSpeed	int	800	Milliseconds for one left-to-right sweep
ShowText	bool	false	Show text overlay
TextFormat	string	”{0:0}%“	Format string (receives percentage 0–100)
TextColor	Color / string	White	Text color
FontSize	double	11	Text font size
IsIndeterminate	bool	false	Enable indeterminate animation

Events & Commands

Name	Type	Description
ValueChangedEvent	EventHandler<double>	Fires when Value changes (MAUI)
ValueChanged	EventCallback<double>	Fires when Value changes (Blazor)
ValueChangedCommand	ICommand	Command fired on value change (MAUI)

Examples

Simple with text

<shiny:ProgressBar Value="75"
                   TrackHeight="20"
                   CornerRadius="10"
                   ShowText="True" />

Gradient with pulse on interval

<shiny:ProgressBar Value="{Binding DownloadProgress}"
                   UseGradient="True"
                   GradientStartColor="#6366F1"
                   GradientEndColor="#EC4899"
                   PulseEnabled="True"
                   PulseOnValueChange="False"
                   PulseInterval="0:00:02"
                   PulseLength="0.6"
                   PulseSpeed="1200" />

Fast narrow pulse

<shiny:ProgressBar Value="{Binding UploadProgress}"
                   BarColor="#10B981"
                   PulseEnabled="True"
                   PulseOnValueChange="False"
                   PulseInterval="0:00:01"
                   PulseLength="0.2"
                   PulseSpeed="500" />

Indeterminate (loading)

<shiny:ProgressBar IsIndeterminate="True"
                   UseGradient="True"
                   GradientStartColor="#14B8A6"
                   GradientEndColor="#3B82F6" />

Blazor indeterminate

<ProgressBar IsIndeterminate="true"
             UseGradient="true"
             GradientStartColor="#14B8A6"
             GradientEndColor="#3B82F6" />

How the Pulse Works

The pulse is a Vista-style shimmer sweep — a translucent gradient highlight (transparent -> color -> transparent) that animates from the left edge to the right edge of the filled portion.

• MAUI: A BoxView with a LinearGradientBrush animates TranslationX across the fill, clipped by a parent container.
• Blazor: A CSS ::after pseudo-element with linear-gradient animates via @keyframes from left to right.

Configure the look:

• PulseLength controls width: 0.2 = narrow beam, 0.6 = wide glow, 1.0 = full bar flash.
• PulseSpeed controls animation duration: 500 = fast, 1200 = slow and smooth.
• PulseColor / PulseOpacity control the highlight appearance.