{"id":20093092,"url":"https://github.com/lottiefiles/svelte-lottie-player","last_synced_at":"2025-04-06T01:11:01.064Z","repository":{"id":42067195,"uuid":"261049563","full_name":"LottieFiles/svelte-lottie-player","owner":"LottieFiles","description":"Lottie Player component for Svelte","archived":false,"fork":false,"pushed_at":"2024-02-01T15:00:27.000Z","size":1831,"stargazers_count":128,"open_issues_count":15,"forks_count":15,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-04-28T03:44:40.157Z","etag":null,"topics":["lottie","svelte","svelte-component","svelte-components"],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LottieFiles.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-05-04T00:42:59.000Z","updated_at":"2024-06-18T17:02:41.184Z","dependencies_parsed_at":"2024-01-16T03:57:24.512Z","dependency_job_id":"b47e9bc6-22a5-4089-9256-e3617ad0cff0","html_url":"https://github.com/LottieFiles/svelte-lottie-player","commit_stats":{"total_commits":22,"total_committers":3,"mean_commits":7.333333333333333,"dds":"0.13636363636363635","last_synced_commit":"15bde544b4da6897021110188837a1b1b958514e"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LottieFiles%2Fsvelte-lottie-player","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LottieFiles%2Fsvelte-lottie-player/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LottieFiles%2Fsvelte-lottie-player/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LottieFiles%2Fsvelte-lottie-player/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LottieFiles","download_url":"https://codeload.github.com/LottieFiles/svelte-lottie-player/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247419861,"owners_count":20936012,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["lottie","svelte","svelte-component","svelte-components"],"created_at":"2024-11-13T16:45:50.790Z","updated_at":"2025-04-06T01:11:01.036Z","avatar_url":"https://github.com/LottieFiles.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Svelte Lottie Player\n\n![npm (scoped)](https://img.shields.io/npm/v/@lottiefiles/svelte-lottie-player?style=flat-square)\n![NPM](https://img.shields.io/npm/l/@lottiefiles/svelte-lottie-player?style=flat-square)\n![David](https://img.shields.io/david/LottieFiles/svelte-lottie-player?style=flat-square)\n![npm bundle size (scoped)](https://img.shields.io/bundlephobia/min/@lottiefiles/svelte-lottie-player?style=flat-square)\n\n\u003e Lottie player component for use with Svelte.\n\nThis provides a Lottie player using the lottie-web library, adding a control toolbar, render graph and other handy\nconfigs for viewing Lottie animations.\n\n![Screenshot](assets/screenshot1.png?raw=true)\n\n## Features\n\n- Configuration of lottie-web via props\n- Control toolbar with play, pause, stop, progress track with seeker, looping\n- Render graph for viewing frame render times\n\n## Table of Contents\n\n- [Getting started](#getting-started)\n- [Installation](#installation)\n- [Usage](#usage)\n\n## Demos\n\n- [Component Storybook](https://lottiefiles.github.io/svelte-lottie-player/)\n- [Basic usage on Svelte REPL](https://svelte.dev/repl/c7c774dba1464389af5d738a9e486658)\n\n## Installation\n\nWith `yarn`:\n\n```bash\nyarn add @lottiefiles/svelte-lottie-player\n```\n\nWith `npm`:\n\n```bash\nnpm install --save @lottiefiles/svelte-lottie-player\n```\n\n## Usage\n\nBasic steps for use in a Svelte project:\n\n```html\n\u003c!-- App.svelte --\u003e\n\u003cscript\u003e\n  import { LottiePlayer } from '@lottiefiles/svelte-lottie-player';\n\n  let controlsLayout = [\n    'previousFrame',\n    'playpause',\n    'stop',\n    'nextFrame',\n    'progress',\n    'frame',\n    'loop',\n    'spacer',\n    'background',\n    'snapshot',\n    'zoom',\n    'info',\n  ];\n\u003c/script\u003e\n\n\u003cLottiePlayer\n  src=\"https://assets2.lottiefiles.com/packages/lf20_wxUJzo.json\"\n  autoplay=\"{true}\"\n  loop=\"{true}\"\n  controls=\"{true}\"\n  renderer=\"svg\"\n  background=\"transparent\"\n  height=\"{600}\"\n  width=\"{600}\"\n  controlsLayout=\"{controlsLayout}\"\n/\u003e\n```\n\n[examples-folder-url]: https://github.com/LottieFiles/svelte-lottie-player/tree/master/examples\n[examples-basic]: https://github.com/LottieFiles/svelte-lottie-player/tree/master/examples/basic\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flottiefiles%2Fsvelte-lottie-player","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flottiefiles%2Fsvelte-lottie-player","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flottiefiles%2Fsvelte-lottie-player/lists"}