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.

Properties¶

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.

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

C#¶

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