Svelte Lottie Player
Lottie player component for use with Svelte.
This provides a Lottie player using the lottie-web library, adding a control toolbar, render graph and other handy configs for viewing Lottie animations.
Features
- Configuration of lottie-web via props
- Control toolbar with play, pause, stop, progress track with seeker, looping
- Render graph for viewing frame render times
Table of Contents
Demos
Installation
With yarn:
yarn add @lottiefiles/svelte-lottie-playerWith npm:
npm install --save @lottiefiles/svelte-lottie-playerUsage
Basic steps for use in a Svelte project:
<!-- App.svelte -->
<script>
import { LottiePlayer } from '@lottiefiles/svelte-lottie-player';
let controlsLayout = [
'previousFrame',
'playpause',
'stop',
'nextFrame',
'progress',
'frame',
'loop',
'spacer',
'background',
'snapshot',
'zoom',
'info',
];
</script>
<LottiePlayer
src="https://assets2.lottiefiles.com/packages/lf20_wxUJzo.json"
autoplay="{true}"
loop="{true}"
controls="{true}"
renderer="svg"
background="transparent"
height="{600}"
width="{600}"
controlsLayout="{controlsLayout}"
/>