Svelte Lottie Player

!npm (scoped)
!NPM
!David
!npm bundle size (scoped)

> 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.

!Screenshot

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

- Getting started
- Installation
- Usage

Demos

- Component Storybook
- Basic usage on Svelte REPL

Installation

With yarn:

``bash
yarn add @lottiefiles/svelte-lottie-player
`

With npm:

`bash
npm install --save @lottiefiles/svelte-lottie-player
`

Usage

Basic steps for use in a Svelte project:

`html



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}"
/>
``

[examples-folder-url]: https://github.com/LottieFiles/svelte-lottie-player/tree/master/examples
[examples-basic]: https://github.com/LottieFiles/svelte-lottie-player/tree/master/examples/basic