The eQuantic.UI.Lottie package provides high-performance animation support using the .lottie and .json formats via the @dotlottie/player-component web component.

Installation

Add the package to your project and register the service:

builder.Services.AddUI(options =>

{

options.UseLottie();

});

Basic Usage

The LottiePlayer component handles asset loading automatically via IRequireAssets.

new LottiePlayer

{

Src = "https://assets.lottiefiles.com/animation.json",

Autoplay = true,

Loop = true,

Width = "300px"

}

dotLottie Support

It is recommended to use the .dotlottie format for smaller file sizes and better performance.

new LottiePlayer

{

Src = "https://example.com/animation.lottie",

Height = "400px",

Controls = true

}

Properties

Property

Type

Description

Src

string

URL to the animation file (.json or .dotlottie).

Autoplay

bool

Starts the animation automatically. Default: true.

Loop

bool

Loops the animation. Default: true.

Speed

double

Playback speed multiplier. Default: 1.

Background

string

Background color. Default: transparent.

Width

string?

CSS width property.

Height

string?

CSS height property.

Controls

bool

Shows the player's native control UI.

ON THIS PAGE