Skip to content

Material Circular

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


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

ProgressThickness - Color

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

AnimatingPercentage - double

Gets the animating percentage.


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


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


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" />