@lottiefiles/lottie-player
Advanced tools
@lottiefiles/lottie-player - npm Package Compare versions
Comparing version 0.0.3 to 0.0.4
| { | ||
| "name": "@lottiefiles/lottie-player", | ||
| "version": "0.0.3", | ||
| "version": "0.0.4", | ||
| "description": "Lottie animation player web component.", | ||
@@ -8,2 +8,5 @@ "main": "dist/lottie-player.js", | ||
| "types": "dist/lottie-player.d.ts", | ||
| "homepage": "https://lottiefiles.com/web-player", | ||
| "repository": "https://github.com/LottieFiles/lottie-player.git", | ||
| "bugs": "https://github.com/LottieFiles/lottie-player/issues", | ||
| "author": "Jawish Hameed <jawish@lottiefiles.com>", | ||
@@ -10,0 +13,0 @@ "license": "MIT", |
@@ -5,25 +5,43 @@ # lottie-player Web Component | ||
| ## Using this component | ||
| [](https://www.npmjs.com/package/@lottiefiles/lottie-player) | ||
| [](https://www.webcomponents.org/element/@lottiefiles/lottie-player) | ||
| ## Installation | ||
| * In HTML: | ||
| Import element from a CDN. | ||
| ```html | ||
| <!doctype html> | ||
| <html> | ||
| <head> | ||
| <script type="module" src="https://unpkg.com/@lottiefiles/lottie-player@0.0.2/dist/lottie-player.js"></script> | ||
| </head> | ||
| <script src="https://unpkg.com/@lottiefiles/lottie-player@0.0.4/dist/lottie-player.js"></script> | ||
| ``` | ||
| <body> | ||
| <lottie-player | ||
| autoplay | ||
| controls | ||
| loop | ||
| mode="normal" | ||
| src="https://assets3.lottiefiles.com/packages/lf20_UJNc2t.json" | ||
| style="width: 320px" | ||
| > | ||
| </lottie-player> | ||
| </body> | ||
| </html> | ||
| * In Javascript or TypeScript: | ||
| Install package using npm or yarn. | ||
| ```shell | ||
| npm install --save @lottiefiles/lottie-player | ||
| ``` | ||
| Import package in your code. | ||
| ```javascript | ||
| import '@lottiefiles/lottie-player/lottie-player.js'; | ||
| ``` | ||
| ## Usage | ||
| ```html | ||
| <lottie-player | ||
| autoplay | ||
| controls | ||
| loop | ||
| mode="normal" | ||
| src="https://assets3.lottiefiles.com/packages/lf20_UJNc2t.json" | ||
| style="width: 320px" | ||
| > | ||
| </lottie-player> | ||
| ``` | ||
| ## Examples | ||
| - View editable examples on [CodeSandBox](https://codesandbox.io/s/y2nxyvomyj) | ||
| ## Properties | ||
@@ -154,4 +172,16 @@ | ||
| ## Styling | ||
| Custom property | Description | Default | ||
| ----------------|-------------|--------- | ||
| --lottie-player-toolbar-height | Toolbar height | 35px | ||
| --lottie-player-toolbar-background-color | Toolbar background color | transparent | ||
| --lottie-player-toolbar-icon-color | Toolbar icon color | #999 | ||
| --lottie-player-toolbar-icon-hover-color| Toolbar icon hover color | #222 | ||
| --lottie-player-toolbar-icon-active-color | Toolbar icon active color | #555 | ||
| --lottie-player-seeker-track-color | Seeker track color | #CCC | ||
| --lottie-player-seeker-thumb-color | Seeker thumb color | rgba(0, 107, 120, 0.8) | ||
| ## License | ||
| MIT License © LottieFiles.com |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No bug tracker
MaintenancePackage does not have a linked bug tracker in package.json.
Found 1 instance in 1 package
No repository
Supply chain riskPackage does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.
Found 1 instance in 1 package
No website
QualityPackage does not have a website.
Found 1 instance in 1 package
Improved metrics
- Number of low quality alerts
- decreased by-33.33%
2
- Number of lines in readme file
- increased by19.35%
185
Worsened metrics
- Total package byte prevSize
- decreased by-0.05%
1087483
- Lines of code
- decreased by-4.98%
1125