Animation in .NET MAUI Circular ProgressBar (SfCircularProgressBar)

The circular 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.
• IndeterminateAnimationDuration: Represents animation duration of the indeterminate state’s indicator.

Easing effects

The AnimationEasing property allows you specify the transfer function that controls animation speed when they run.

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

XAML

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

C#

SfCircularProgressBar circularProgressBar = new SfCircularProgressBar();
circularProgressBar.Progress = 75;
circularProgressBar.AnimationEasing = Easing.CubicInOut;
this.Content = circularProgressBar;

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 circular progress bar.

XAML

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

C#

SfCircularProgressBar circularProgressBar = new SfCircularProgressBar();
circularProgressBar.IsIndeterminate = true;
circularProgressBar.IndeterminateAnimationEasing = Easing.BounceIn;
this.Content = circularProgressBar;

NOTE

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