https://github.com/LottieFiles/svelte-lottie-player

Lottie Player component for Svelte
https://github.com/LottieFiles/svelte-lottie-player

lottie svelte svelte-component svelte-components

Last synced: about 2 months ago
JSON representation

Lottie Player component for Svelte

• Host: GitHub
• URL: https://github.com/LottieFiles/svelte-lottie-player
• Owner: LottieFiles
• License: mit
• Created: 2020-05-04T00:42:59.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2024-02-01T15:00:27.000Z (8 months ago)
• Last Synced: 2024-04-28T03:44:40.157Z (5 months ago)
• Topics: lottie, svelte, svelte-component, svelte-components
• Language: HTML
• Size: 1.75 MB
• Stars: 128
• Watchers: 7
• Forks: 15
• Open Issues: 15
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-lottie - LottieFiles

README

        
# Svelte Lottie Player

![npm (scoped)](https://img.shields.io/npm/v/@lottiefiles/svelte-lottie-player?style=flat-square)

![NPM](https://img.shields.io/npm/l/@lottiefiles/svelte-lottie-player?style=flat-square)

![David](https://img.shields.io/david/LottieFiles/svelte-lottie-player?style=flat-square)

![npm bundle size (scoped)](https://img.shields.io/bundlephobia/min/@lottiefiles/svelte-lottie-player?style=flat-square)

> 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](assets/screenshot1.png?raw=true)

## 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](#getting-started)

- [Installation](#installation)

- [Usage](#usage)

## Demos

- [Component Storybook](https://lottiefiles.github.io/svelte-lottie-player/)

- [Basic usage on Svelte REPL](https://svelte.dev/repl/c7c774dba1464389af5d738a9e486658)

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

  import { LottiePlayer } from '@lottiefiles/svelte-lottie-player';

  let controlsLayout = [

    'previousFrame',

    'playpause',

    'stop',

    'nextFrame',

    'progress',

    'frame',

    'loop',

    'spacer',

    'background',

    'snapshot',

    'zoom',

    'info',

  ];

```

[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