START HERE
Getting Started
WRITE-ONCE
Write-Once Components
Declarative Surface
Photon Engine
Design System
Capabilities
Storage
Forms
Code Editor
Markdown
Mermaid
ARCHITECTURE
Architecture Overview
Package Architecture
Components
Styling
Localization
Analytics & GTM
COMPILATION
Compiler
Compile-Time Evaluation
Supported C# Features
External Type Resolution
Build Flow
RUNTIME
Runtime (TypeScript)
Performance
SERVER
Server Integration
Assets
BunPackage
Security
ECOSYSTEM
Image
Charts
Icons
Lottie
DEVELOPMENT
Visual Editor
Debug
Roadmap
PT-BR
Analytics-pt-BR
Architecture-pt-BR
Assets-pt-BR
BuildFlow-pt-BR
BunPackage-pt-BR
Capabilities-pt-BR
Charts-pt-BR
CodeEditor-pt-BR
Compiler-pt-BR
CompileTimeEvaluation-pt-BR
Components-pt-BR
Debug-pt-BR
DeclarativeSurface-pt-BR
DesignSystem-pt-BR
ExternalTypeResolution-pt-BR
Forms-pt-BR
GettingStarted-pt-BR
Home-pt-BR
Icons-pt-BR
Image-pt-BR
Localization-pt-BR
Lottie-pt-BR
Markdown-pt-BR
Mermaid-pt-BR
PackageArchitecture-pt-BR
Performance-pt-BR
Photon-pt-BR
Roadmap-pt-BR
Runtime-pt-BR
Security-pt-BR
ServerIntegration-pt-BR
Storage-pt-BR
Styling-pt-BR
SupportedFeatures-pt-BR
VisualEditor-pt-BR
WriteOnceComponents-pt-BR
ACTIONS & INPUTS
Button
IconButton
TextInput
Select
Checkbox
Switch
RadioGroup
SegmentedControl
Slider
Stepper
SearchField
SURFACES & DISPLAY
Card
Badge
Chip
Avatar
Banner
ProgressBar
EmptyState
Divider
NAVIGATION
Tabs
AppBar
BottomNavigation
Breadcrumb
Pagination
PageIndicator
Menu
Drawer
OVERLAYS
Dialog
BottomSheet
Toast
Popover
Tooltip
LISTS & DATA
List
ListView
Table
Accordion
CodeBlock
TOUCH INTERACTION
PullToRefresh
SwipeableRow
DocsEcosystem
eQuantic.UI.LottieEdit this page
1 min read🌐 This page in: English · Português
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:
1
2
3
4
builder.Services.AddUI(options =>
{
options.UseLottie();
});
Basic Usage
The LottiePlayer component handles asset loading automatically via IRequireAssets.
1
2
3
4
5
6
7
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.
1
2
3
4
5
6
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.