Material Circular¶

The Material Circular loading indicator is a customizable control used to simply, accurately and beautifully display a loading indicator the end-user.

Properties¶

ForegroundLoadingColor - Color¶

Gets or sets the color of the foreground. Default is Xamarin.Forms.Color.Default.

BackgroundLoadingColor - Color¶

Gets or sets the color of the background. Default is Xamarin.Forms.Color.Default.

EndCapType - EndCapType¶

Gets or sets the type of the end cap of the progress portion. Default is Rounded. Can be set to one of the following:

public enum EndCapType
    {
        Square,
        Rounded
    }

ProgressThickness - Color¶

Gets or sets the progress thickness. Default value is 12d.

AnimatingPercentage - double¶

Gets the animating percentage.

Methods¶

void StartAnimating(uint rate = 16, uint length = 250, Easing easing = null)

Starts the step animation.

rate: The time, in milliseconds, between frames.

length: The number of milliseconds over which to interpolate the animation.

easing: The easing function to use to transision in, out, or in and out of the animation.

void StopAnimating()

Stops the steps animation.

Example Usage¶

Xaml¶

<aurora:MaterialCircular x:Name="loading" ForegroundLoadingColor="#F17A14" BackgroundLoadingColor="#F4A624" />

C#¶

var loading = new MaterialCircular
{
    ForegroundLoadingColor = Color.Fuschia,
    BackgroundLoadingColor = Color.White
};

Example Styles¶

An indicator with ProgressThickness of 30, ForegroundLoadingColor of Chocolate, BackgroundLoadingColor of Beige and EndCapType of Rounded:

var example1 = new MaterialCircular
{
    ProgressThickness = 30,
    ForegroundLoadingColor = Color.Chocolate,
    BackgroundLoadingColor = Color.Beige,
    EndCapType = Aurora.EndCapType.Rounded
};

<aurora:MaterialCircular x:Name="example1" ProgressThickness="30" ForegroundLoadingColor="#D2691E" BackgroundLoadingColor="#F5F5DC" EndCapType="Rounded" />

An indicator with ProgressThickness of 70, ForegroundLoadingColor of Ivory, BackgroundLoadingColor of SlateGray and EndCapType of Square:

var example2 = new MaterialCircular
{
    ProgressThickness = 70,
    ForegroundLoadingColor = Color.Ivory,
    BackgroundLoadingColor = Color.SlateGray,
    EndCapType = Aurora.EndCapType.Square
};

<aurora:MaterialCircular x:Name="example2" ProgressThickness="70" ForegroundLoadingColor="#FFFFF0" BackgroundLoadingColor="#708090" EndCapType="Square" />