New to Telerik UI for .NET MAUI? Start a free 30-day trial

.NET MAUI ProgressBar Animations

ProgressBar for .NET MAUI allows you to apply dfferent 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 PrgressBar Value changes when using the Stepper control. The animation occurs when the control Value changes.

<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:

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

Here is the result on Android:

ProgressBar Animation Duration and Easing

Here is the result on WinUI:

ProgressBar Animation Duration and Easing

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 calue is 800.
  • IndeterminateAnimationEasing(Microsoft.Maui.Easing))—Specifies animation acceleration over time. The default value is Easing.Linear.

Example with IndeterminateAnimationDuration and IndeterminateAnimationEasing

The snippet below shows a simple RadLinearProgressBar definition:

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

Add the following namespace:

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

Here is the result on Android:

ProgressBar Indeterminate Animation Duration and Easing

Here is the result on WinUI:

ProgressBar Indeterminate Animation Duration and Easing

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

See Also

In this article
Not finding the help you need?