Maanfee.Lottie
2.6.0
dotnet add package Maanfee.Lottie --version 2.6.0
NuGet\Install-Package Maanfee.Lottie -Version 2.6.0
<PackageReference Include="Maanfee.Lottie" Version="2.6.0" />
<PackageVersion Include="Maanfee.Lottie" Version="2.6.0" />
<PackageReference Include="Maanfee.Lottie" />
paket add Maanfee.Lottie --version 2.6.0
#r "nuget: Maanfee.Lottie, 2.6.0"
#:package Maanfee.Lottie@2.6.0
#addin nuget:?package=Maanfee.Lottie&version=2.6.0
#tool nuget:?package=Maanfee.Lottie&version=2.6.0
Maanfee Lottie
Maanfee Lottie is a comprehensive Blazor component library for easily embedding and playing Lottie animations in Blazor applications with full JavaScript interop support.
Features
- 🎬 Easy Integration - Seamlessly integrate Lottie animations into Blazor applications
- 🔧 JavaScript Interop - Full control over animation playback and behavior
- 📦 Built-in Animation Management - Load animations from embedded resources or external URLs
- ⚡ Performance Optimized - Efficient resource loading and disposal
- 🎛️ Complete API - Play, pause, stop, speed control, and frame navigation
- 🔄 Multiple Renderers - Support for SVG and canvas rendering
- 🔔 Event Handling - Comprehensive event system for animation state changes
- 🎯 Frame Accuracy - Precise frame navigation and seeking capabilities
Demos
<div style="display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: nowrap;"> <div style="text-align: center; flex: 1; min-width: 0;"> <img src="https://nuget.org/SolutionItems/Screenshots/BuildingConstruction.gif" alt="Building Construction Animation" style="width: 120px; height: 90px; object-fit: cover; border-radius: 6px;" /> <p style="margin-top: 4px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">Building Construction</p> </div> <div style="text-align: center; flex: 1; min-width: 0;"> <img src="https://nuget.org/SolutionItems/Screenshots/DashboardComponents.gif" alt="Dashboard Components Animation" style="width: 120px; height: 90px; object-fit: cover; border-radius: 6px;" /> <p style="margin-top: 4px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">Dashboard Components</p> </div> <div style="text-align: center; flex: 1; min-width: 0;"> <img src="https://nuget.org/SolutionItems/Screenshots/Lighthouse.gif" alt="Lighthouse Animation" style="width: 120px; height: 90px; object-fit: cover; border-radius: 6px;" /> <p style="margin-top: 4px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">Lighthouse</p> </div> </div>
Installation and Usage
Please download the source code and run it to install and use the component.
Animation Resources
Find beautiful Lottie animations and icons for your projects:
- <a href="https://creattie.com/lottie-animated-illustrations/all?type=free&orderBy=order&page=1" target="_blank">Creattie.com</a>
- <a href="https://icon-icons.com/pack/University/4302" target="_blank">icon-icons.com</a>
Maanfee Lottie makes it simple to bring engaging animations to your Blazor applications with minimal code and maximum flexibility. 🚀
| Product | Versions Compatible and additional computed target framework versions. |
|---|---|
| .NET | net10.0 is compatible. net10.0-android was computed. net10.0-browser was computed. net10.0-ios was computed. net10.0-maccatalyst was computed. net10.0-macos was computed. net10.0-tvos was computed. net10.0-windows was computed. |
-
net10.0
- Microsoft.AspNetCore.Components (>= 10.0.1)
- Microsoft.Extensions.DependencyInjection.Abstractions (>= 10.0.1)
- Microsoft.JSInterop (>= 10.0.1)
NuGet packages (1)
Showing the top 1 NuGet packages that depend on Maanfee.Lottie:
| Package | Downloads |
|---|---|
|
Maanfee.Dashboard.Core
Package Description |
GitHub repositories
This package is not used by any popular GitHub repositories.
| Version | Downloads | Last Updated |
|---|---|---|
| 2.6.0 | 1,047 | 12/10/2025 |