All Projects → LottieFiles → svelte-lottie-player

LottieFiles / svelte-lottie-player

Licence: MIT license
Lottie Player component for Svelte

Programming Languages

HTML
75241 projects
javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to svelte-lottie-player

s-date-range-picker
📅 A date range picker built with Svelte
Stars: ✭ 13 (-85.56%)
Mutual labels:  svelte-components, svelte
p5-svelte
Easily add p5 sketches to a Svelte project 🍛 🌱
Stars: ✭ 94 (+4.44%)
Mutual labels:  svelte-components, svelte
svelte-material
Modular and customizable Material Design UI components for Svelte.js
Stars: ✭ 30 (-66.67%)
Mutual labels:  svelte-components, svelte
svelte-search
Accessible, customizable Svelte search component
Stars: ✭ 17 (-81.11%)
Mutual labels:  svelte, svelte-component
ui-svelte
A component library for Svelte
Stars: ✭ 18 (-80%)
Mutual labels:  svelte-components, svelte
fa-svelte
Font Awesome 5 for svelte.js
Stars: ✭ 72 (-20%)
Mutual labels:  svelte-components, svelte
focus-svelte
focus lock for svelte
Stars: ✭ 18 (-80%)
Mutual labels:  svelte-components, svelte
svelte-multiselect
Keyboard-friendly, accessible and highly customizable multi-select component
Stars: ✭ 91 (+1.11%)
Mutual labels:  svelte, svelte-component
tabler-icons-svelte
A library of SVG Svelte components for Tabler Icons.
Stars: ✭ 50 (-44.44%)
Mutual labels:  svelte-components, svelte
svelte-headlessui
Unofficial Svelte port of Headless UI components
Stars: ✭ 564 (+526.67%)
Mutual labels:  svelte-components, svelte
svelte-intersection-observer
Detect if an element is in the viewport using the Intersection Observer API
Stars: ✭ 151 (+67.78%)
Mutual labels:  svelte, svelte-component
sapper-template-rollup
Starter Rollup template for Sapper apps using postcss, cssnano, tailwindcss, and svelte-preprocess.
Stars: ✭ 32 (-64.44%)
Mutual labels:  svelte-components, svelte
sveld
Generate TypeScript definitions for your Svelte components
Stars: ✭ 281 (+212.22%)
Mutual labels:  svelte, svelte-component
kahi-ui
Straight-forward Svelte UI for the Web
Stars: ✭ 169 (+87.78%)
Mutual labels:  svelte-components, svelte
svelte-undoable
Memento design pattern in Svelte
Stars: ✭ 39 (-56.67%)
Mutual labels:  svelte, svelte-component
carbon-components-svelte
Svelte implementation of the Carbon Design System
Stars: ✭ 1,615 (+1694.44%)
Mutual labels:  svelte-components, svelte
svelte-inview
A Svelte action that monitors an element enters or leaves the viewport.🔥
Stars: ✭ 358 (+297.78%)
Mutual labels:  svelte, svelte-component
svelte-marquee-text
[CSS GPU Animation] Marquee Text for Svelte
Stars: ✭ 47 (-47.78%)
Mutual labels:  svelte, svelte-component
svelte-flat-ui
Flat UI Independent JS Components + English Docs =
Stars: ✭ 45 (-50%)
Mutual labels:  svelte-components, svelte
svelte-progressbar
A multiseries, SVG progressbar component made with Svelte
Stars: ✭ 85 (-5.56%)
Mutual labels:  svelte-components, svelte

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

Demos

Installation

With yarn:

yarn add @lottiefiles/svelte-lottie-player

With npm:

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

Usage

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}"
/>
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].