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
On this page