Blazorise Lottie Animation Component

A LottieAnimation component used to embed JSON-based Lottie animations.

Installation

NuGet

Install extension from NuGet.

Install-Package Blazorise.LottieAnimation

Imports

In your main _Imports.razor add:

@using Blazorise.LottieAnimation

Examples

Basic

To embed an animation you just need to define the Path of the animation.

<LottieAnimation Path="https://assets2.lottiefiles.com/datafiles/WFKIUGAVvLl1azi/data.json" />

Best Practices

Fixed Height

While the animation will work fine without it, it is advised to define a fixed height, eg. <LottieAnimation Style="height: 250px;">. That way, the user can see the loading animation until the component is fully loaded.

API

Attributes

Name	Description	Type	Default
`Completed`	Occurs once the animation completes.	`EventCallback`
`CurrentFrame`	Gets or sets the current playback frame.	`double`	`0`
`CurrentFrameChanged`	Occurs whenever the current frame changes.	`EventCallback<double>`
`Direction`	Controls the animation playback direction.	`LottieAnimationDirection`	`Forward`
`Loaded`	Occurs once the data for the animation has loaded.	`EventCallback<LottieAnimationLoadedEventArgs>`
`Loop`	True to loop the animation. If a number is provided then it specifies the number of times to loop.	`LoopConfiguration`	`true`
`LoopCompleted`	Occurs whenever a loop of the animation completes.	`EventCallback`
`Path`	Gets or sets the source path for the animation.	`string`	`null`
`Paused`	Controls whether or not the animation is paused.	`bool`	`false`
`Renderer`	Gets or sets the renderer to use for the animation.	`LottieAnimationRenderer`	`Svg`
`Speed`	Controls the playback speed.	`double`	`1.0`