Animation in Xamarin ProgressBar (Progress Bar)

17 May 20211 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:

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.

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

</progressBar:SfLinearProgressBar>
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.

    <progressBar:SfLinearProgressBar IsIndeterminate="True" IndeterminateEasingEffect="BounceIn">
    
    </progressBar:SfLinearProgressBar>
    SfLinearProgressBar linearProgressBar = new SfLinearProgressBar();
    
    linearProgressBar.IsIndeterminate = true;
    
    linearProgressBar.IndeterminateEasingEffect = IndeterminateEasingEffects.BounceIn;