Added in v1.2

Blazorise Lottie Animation component

Embed JSON-based Lottie animations with the LottieAnimation component.

To use the LottieAnimation component, install the Blazorise.LottieAnimation package first.

Installation

NuGet

Install extension from NuGet.

dotnet add 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

See the API reference for the parameters, events, methods, and related types available to the components covered on this page.

<LottieAnimation />