Skip to content

Waves Loading

The loading Waves gives your app some flair during loading sequences by providing an indicator that shows parallax waves in the colors and amounts of your choosing.


WaveCount - int

Gets or sets the wave count. Default value is 5.

WaveHeight - double

Gets or sets the height of the wave. Default is 40d.

WaveStacks - int

Gets or sets the wave stacks. Default value is 3.

ForegroundWaveColor - Color

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

BackgroundWaveColor - Color

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

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:Waves x:Name="loading" WaveCount="3" WaveStacks="3" WaveHeight="80" ForegroundWaveColor="#0D47A1" BackgroundWaveColor="#BBDEFB" BackgroundColor="#E91E63" /> 


var waves = new Waves
    WaveCount = 2,
    WaveStacks = 5,
    ForegroundWaveColor = Color.Blue,
    BackgroundWaveColor = Color.Aqua

Example Styles

A wave indicator with WaveCount of 2, WaveStacks of 4, WaveHeight of 80, ForegroundWaveColor of AliceBlue and BackgroundWaveColor of DarkGray:

var example1 = new Waves
    WaveCount = 2,
    WaveStacks = 4,
    WaveHeight = 80,
    ForegroundWaveColor = Color.AliceBlue,
    BackgroundWaveColor = Color.DarkGray
<aurora:Waves x:Name="example1" WaveCount="2" WaveStacks="4" WaveHeight="80" ForegroundWaveColor="#F0F8FF" BackgroundWaveColor="#A9A9A9" /> 

A wave indicator with WaveCount of 6, WaveStacks of 2, WaveHeight of 35, ForegroundWaveColor of DarkSeaGreen, BackgroundWaveColor of Gold and BackgroundColor of Indigo:

var example2 = new Waves
    WaveCount = 6,
    WaveStacks = 2,
    WaveHeight = 35,
    ForegroundWaveColor = Color.DarkSeaGreen,
    BackgroundWaveColor = Color.Gold,
    BackgroundColor = Color.Indigo
<aurora:Waves x:Name="example2" WaveCount="6" WaveStacks="2" WaveHeight="35" ForegroundWaveColor="#8FBC8B" BackgroundWaveColor="#FFD700" BackgroundColor="#4B0082" />