Animation in Xamarin ProgressBar (Progress Bar)

20 Jan 20251 minute to read

The 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 EasingEffect 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 linear progress bar.

XAML

<progressBar:SfLinearProgressBar Progress="75" EasingEffect="CubicInOut">

</progressBar:SfLinearProgressBar>

C#

SfLinearProgressBar linearProgressBar = new SfLinearProgressBar();

linearProgressBar.Progress = 75;

linearProgressBar.EasingEffect = EasingEffects.CubicInOut;

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, int animationDuration, Easing easingEffect)

NOTE

The animationDuration and easingEffect parameters will not affect the configuration of the AnimationDuration and EasingEffect properties.

Indeterminate Easing Effects

The IndeterminateEasingEffect 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" IndeterminateEasingEffect="BounceIn">

</progressBar:SfLinearProgressBar>

C#

SfLinearProgressBar linearProgressBar = new SfLinearProgressBar();

linearProgressBar.IsIndeterminate = true;

linearProgressBar.IndeterminateEasingEffect = IndeterminateEasingEffects.BounceIn;