Animation in .NET MAUI Linear ProgressBar (SfLinearProgressBar)

21 Jul 20262 minutes to read

The linear progress bar provides animation support to visualize the progress value changes in an interactive way.

The following properties are used to define the duration of animation for the specific states.

• AnimationDuration: Represents animation duration of the determinate state’s progress indicator.
• SecondaryAnimationDuration: Represents animation duration of the determinate state’s secondary progress indicator.
• IndeterminateAnimationDuration: Represents animation duration of the indeterminate state’s indicator.

Easing effects

The AnimationEasing property allows you to specify the transfer function that controls the animation speed when it runs.

The following code sample demonstrates the CubicInOut easing function of the linear progress bar.

XAML

<progressBar:SfLinearProgressBar Progress="75" 
                                 AnimationEasing="{x:Static Easing.CubicInOut}" />

C#

using Syncfusion.Maui.ProgressBar;

SfLinearProgressBar linearProgressBar = new SfLinearProgressBar();
linearProgressBar.Progress = 75;
linearProgressBar.AnimationEasing = Easing.CubicInOut;
this.Content = linearProgressBar;

The SetProgress() method in the progress bar is used to set progress value along with animation duration and easing effect applicable for the specific method call.

C#

void SetProgress(double progress, double? animationDuration = null, Easing? easing = null)

NOTE

The animation duration and easing effect parameters will not affect the configuration of the AnimationDuration and AnimationEasing properties.

Indeterminate Easing Effects

The IndeterminateAnimationEasing property allows you to specify a transfer function for indeterminate state, which controls animation speed when they run.

The following code sample demonstrates the BounceIn easing function of the linear progress bar.

XAML

<progressBar:SfLinearProgressBar IsIndeterminate="true" 
                                 IndeterminateAnimationEasing="{x:Static Easing.BounceIn}" />

C#

using Syncfusion.Maui.ProgressBar;

SfLinearProgressBar linearProgressBar = new SfLinearProgressBar();
linearProgressBar.IsIndeterminate = true;
linearProgressBar.IndeterminateAnimationEasing = Easing.BounceIn;
this.Content = linearProgressBar;

NOTE

Refer to our .NET MAUI Linear ProgressBar feature tour page for its groundbreaking feature representations. Also explore our .NET MAUI Linear ProgressBar example that shows how to configure a SfLinearProgressBar in .NET MAUI.