This is a Vue component for the Lottie Web Player. This library is a vue wrapper around the LottieFiles Lottie Web Player
- Install package using npm or yarn.
npm install --save @lottiefiles/vue-lottie-player
- Import package in your code.
import LottieVuePlayer from "@lottiefiles/vue-lottie-player";
- Add the player as a plugin to Vue
Vue.use(LottieVuePlayer);
-
Clone repo
-
run yarn install
Add the element lottie-vue-player
and set the src
prop to a URL pointing to a valid Lottie JSON. Full example of an App.vue file is shown below.
<template>
<div id="app">
<lottie-vue-player :src="`https://assets10.lottiefiles.com/packages/lf20_tzjfwgud.json`"
:theme="options.theme"
:player-size="options.playerSize"
:player-controls="true"
style="width: 100%; height:400px">
</lottie-vue-player>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
options: {
minimizable: false,
playerSize: "standard",
backgroundColor: '#fff',
backgroundStyle: 'color',
theme: {
controlsView: "standard",
active: "light",
light: {
color: '#3D4852',
backgroundColor: '#fff',
opacity: '0.7',
},
dark: {
color: '#fff',
backgroundColor: '#202020',
opacity: '0.7',
}
}
}
}
}
}
</script>
Prop | Description | Type | Default |
---|---|---|---|
autoplay |
Autoplay animation on load. | boolean |
false |
backgroundColor |
Background color. | string |
undefined |
playerControls |
Show controls. | boolean |
false |
showColorPicker |
Show color picker | boolean |
false |
playerSize |
Player set size (hide, minimal, standard) | string |
standard |
loop |
Whether to loop animation. | boolean |
false |
speed |
Animation speed. | number |
1 |
style |
The style for the container. | object |
undefined |
src (required) |
Bodymovin JSON data or URL to JSON. | object |
string |
Toggle animation play pause.
Type: void
Toggle full screen player.
Type: void
Toggle animation loop.
Type: void
Sets animation play speed.
Name | Type | Description |
---|---|---|
value |
number |
Playback speed. |
Type: void
Stops animation play.
Type: void
set background color.
Type: void
MIT License © LottieFiles.com