Lottie

eQuantic.UI.Lottie

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.