.NET MAUI ProgressBar Animations

ProgressBar for .NET MAUI allows you to apply different animation easing while changing its Value and an animation while in Indeterminate mode. In addition you can change the animation duration.

Animation during progress change

Customize the animation duration and easing through ProgressAnimationDuration and ProgressAnimationEasing properties.

• ProgressAnimationDuration(int)—Defines the duration of the animation while control's value changes. The default value is 800.
• ProgressAnimationEasing(Microsoft.Maui.Easing))—Specifies animation acceleration over time. The default value is Easing.Linear.

Example with ProgressAnimationDuration and ProgressAnimationEasing.

The snippet below shows a simple RadLinearProgressBar definition. The ProgressBar Value changes when using the Stepper control. The animation occurs when the control Value changes.

• XAML

<Label Text="ProgressAnimationDuration = 1000 and ProgressAnimationEasing = CubicIn." />
<Label Text="Update the value to observe the duration and easing:" />
<telerik:RadNumericInput x:Name="valueNumeric"
                         Minimum="0"
                         Maximum="100"
                         WidthRequest="{OnIdiom Phone='-1', Desktop='300'}"
                         HorizontalOptions="{OnIdiom Phone='Fill', Desktop='Start'}"
                         Value="20"
                         Step="20"/>
<telerik:RadLinearProgressBar x:Name="progressBar"
                              Minimum="0"
                              Maximum="100"
                              Value="{Binding Value, Source={x:Reference valueNumeric}}"
                              ProgressAnimationDuration="1000"
                              ProgressAnimationEasing="{Static Easing.CubicIn}"
                              Margin="0, 8, 0, 24" />

Add the following namespace:

• XAML

xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"

Here is the result on Android:

Here is the result on WinUI:

Animation when Indeterminate Mode

Customize the indeterminate animation duration and easing through IndeterminateAnimationDuration and IndeterminateAnimationEasing properties.

• IndeterminateAnimationDuration(int)—Defines the duration of the animation while in Indeterminate mode. The default value is 800.
• IndeterminateAnimationEasing(Microsoft.Maui.Easing))—Specifies animation acceleration over time. The default value is Easing.Linear.

The following code snippet provides an example with IndeterminateAnimationDuration and IndeterminateAnimationEasing.

The snippet below shows a simple RadLinearProgressBar definition:

• XAML

<Label Text="IndeterminateAnimationDuration = 1000, IndeterminateAnimationEasing = CubicIn:" />
<telerik:RadLinearProgressBar Value="25"
                              IndeterminateAnimationDuration="1000"
                              IndeterminateAnimationEasing="{Static Easing.CubicIn}"
                              IsIndeterminate="True" />

Add the following namespace:

• XAML

xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"

Here is the result on Android:

Here is the result on WinUI:

For the ProgressBar Animation example refer to the SDKBrowser Demo Application.