Animations

RadBusyIndicator provides a set of built-in animations which you can use. They can be changed via the AnimationType property.

The property is an enum called AnimationType and it accepts values named Animation1 to Animation8. Animation1, Animation2, Animation3, etc. to Animation8. Animation1 is the default one.

BusyIndicator animations list

The animation will be displayed only when the IsBusy property is set to True.

Changing animation size and color

You can set the size of the animation content, which is the animated element. This can be done via the AnimationContentWidthRequest and AnimationContentHeightRequest properties. By default the size of the default animation content is 25x25 pixels.

You can also change the color of the animation with the AnimationColor property.

AnimationContentWidthRequest, AnimationContentHeightRequest and AnimationColor won't be applied if you use custom animation.

Custom animation

You can create a custom animation using a combination of 3 properties - Animations, BusyContent and AnimationType.

  • To tell the control that a custom animation is used you can set the AnimationType to Custom
  • The BusyContent holds the view that will be animated.
  • The custom animation is added in the Animations collection of the busy indicator

The following example demonstrates how to create a custom animation that changes the opacity of a text (blinking effect).

Defining custom animation in Xaml

<telerikBusyIndicator:RadBusyIndicator x:Name="radBusyIndicator"
                                       AnimationType="Custom"
                                       IsBusy="True">
    <telerikBusyIndicator:RadBusyIndicator.Content>
        <Label Text="This is the content of the RadBusyIndicator control displayed when the indicator is not busy." />
    </telerikBusyIndicator:RadBusyIndicator.Content>
    <telerikBusyIndicator:RadBusyIndicator.BusyContent>
        <Label HorizontalOptions="Center"
               Text="Loading..."
               VerticalOptions="Center" />
    </telerikBusyIndicator:RadBusyIndicator.BusyContent>
</telerikBusyIndicator:RadBusyIndicator>
RadDoubleAnimation annimation = new RadDoubleAnimation() { Duration = 800, From = 0.1, To = 1, PropertyPath = "Opacity", Target = radBusyIndicator.BusyContent, RepeatForever = true, AutoReverse = true };
radBusyIndicator.Animations.Add(annimation);

Device.StartTimer(TimeSpan.FromMilliseconds(5000), 
    () => 
    {
        radBusyIndicator.IsBusy = false;
        return false;
    });

Defining custom animation in code-behind

RadBusyIndicator radBusyIndicator = new RadBusyIndicator()
{
    IsBusy = true,
    AnimationType = AnimationType.Custom,
    Content = new Label() { Text = "This is the content of the RadBusyIndicator control displayed when the indicator is not busy." },
    BusyContent = new Label()
    {
        Text = "Loading...",
        VerticalOptions = new LayoutOptions(LayoutAlignment.Center, false),
        HorizontalOptions = new LayoutOptions(LayoutAlignment.Center, false),
    },
};

RadDoubleAnimation annimation = new RadDoubleAnimation() { Duration = 800, From = 0.1, To = 1, PropertyPath = "Opacity", Target = radBusyIndicator.BusyContent, RepeatForever = true, AutoReverse = true };
radBusyIndicator.Animations.Add(annimation);

Device.StartTimer(TimeSpan.FromMilliseconds(5000),
    () =>
    {
        radBusyIndicator.IsBusy = false;
        return false;
    });

See Also