# Lottie Player
Effortlessly bring the smallest, free, ready-to-use motion graphics.
# Basic usage
Load JSON from URL
Deprecated component
<template>
<b-lottie
src="https://assets6.lottiefiles.com/packages/lf20_lodmufpp.json"
:width="400"
:height="320"
/>
</template>
# Inline
Load JSON inline
Deprecated component
<template>
<b-lottie :src="source" :width="320" :height="320" />
</template>
<script setup lang="ts">
const source = JSON.stringify({
v: '5.7.1',
fr: 29.9700012207031,
ip: 0,
op: 100.000004073084,
w: 1000,
h: 1000,
nm: 'leftright rainbow',
ddd: 0,
assets: [],
layers: [
{
ddd: 0,
ind: 1,
ty: 4,
nm: 'violet Outlines',
sr: 1,
ks: {
o: {
a: 0,
k: 100,
ix: 11,
},
r: {
a: 0,
k: 0,
ix: 10,
},
p: {
a: 0,
k: [485.165, 594.076, 0],
ix: 2,
},
a: {
a: 0,
k: [225, 175, 0],
ix: 1,
},
s: {
a: 0,
k: [100, 100, 100],
ix: 6,
},
},
ao: 0,
shapes: [
{
ty: 'gr',
it: [
{
ind: 0,
ty: 'sh',
ix: 1,
ks: {
a: 0,
k: {
i: [
[0, 0],
[-55.229, 0],
[0, -55.229],
],
o: [
[0, -55.229],
[55.228, 0],
[0, 0],
],
v: [
[-100, 50],
[0, -50],
[100, 50],
],
c: false,
},
ix: 2,
},
nm: 'Path 1',
mn: 'ADBE Vector Shape - Group',
hd: false,
},
{
ty: 'st',
c: {
a: 0,
k: [0.510000011968, 0.250999989229, 0.651000019148, 1],
ix: 3,
},
o: {
a: 0,
k: 100,
ix: 4,
},
w: {
a: 0,
k: 50,
ix: 5,
},
lc: 2,
lj: 1,
ml: 10,
bm: 0,
nm: 'Stroke 1',
mn: 'ADBE Vector Graphic - Stroke',
hd: false,
},
{
ty: 'tr',
p: {
a: 0,
k: [225, 175],
ix: 2,
},
a: {
a: 0,
k: [0, 0],
ix: 1,
},
s: {
a: 0,
k: [100, 100],
ix: 3,
},
r: {
a: 0,
k: 0,
ix: 6,
},
o: {
a: 0,
k: 100,
ix: 7,
},
sk: {
a: 0,
k: 0,
ix: 4,
},
sa: {
a: 0,
k: 0,
ix: 5,
},
nm: 'Transform',
},
],
nm: 'Group 1',
np: 2,
cix: 2,
bm: 0,
ix: 1,
mn: 'ADBE Vector Group',
hd: false,
},
{
ty: 'tm',
s: {
a: 1,
k: [
{
i: {
x: [0.667],
y: [1],
},
o: {
x: [1],
y: [0],
},
t: 25,
s: [0],
},
{
i: {
x: [0.667],
y: [1],
},
o: {
x: [0.934],
y: [-0.054],
},
t: 50,
s: [95],
},
{
t: 75.0000030548126,
s: [0],
},
],
ix: 1,
},
e: {
a: 1,
k: [
{
i: {
x: [0.667],
y: [1],
},
o: {
x: [0.918],
y: [0],
},
t: 0,
s: [5],
},
{
i: {
x: [0.667],
y: [1],
},
o: {
x: [0.333],
y: [0],
},
t: 25,
s: [100],
},
{
i: {
x: [0.667],
y: [1],
},
o: {
x: [0.333],
y: [0],
},
t: 75,
s: [100],
},
{
t: 100.000004073084,
s: [5],
},
],
ix: 2,
},
o: {
a: 0,
k: 0,
ix: 3,
},
m: 1,
ix: 2,
nm: 'Trim Paths 1',
mn: 'ADBE Vector Filter - Trim',
hd: false,
},
],
ip: 0,
op: 200.000008146167,
st: 0,
bm: 0,
},
{
ddd: 0,
ind: 2,
ty: 4,
nm: 'blue Outlines',
sr: 1,
ks: {
o: {
a: 0,
k: 100,
ix: 11,
},
r: {
a: 0,
k: 0,
ix: 10,
},
p: {
a: 0,
k: [485.165, 569.076, 0],
ix: 2,
},
a: {
a: 0,
k: [275, 200, 0],
ix: 1,
},
s: {
a: 0,
k: [100, 100, 100],
ix: 6,
},
},
ao: 0,
shapes: [
{
ty: 'gr',
it: [
{
ind: 0,
ty: 'sh',
ix: 1,
ks: {
a: 0,
k: {
i: [
[0, 0],
[-82.843, 0],
[0, -82.843],
],
o: [
[0, -82.843],
[82.842, 0],
[0, 0],
],
v: [
[-150, 75],
[0, -75],
[150, 75],
],
c: false,
},
ix: 2,
},
nm: 'Path 1',
mn: 'ADBE Vector Shape - Group',
hd: false,
},
{
ty: 'st',
c: {
a: 0,
k: [0.156999999402, 0.588000009574, 0.709999952129, 1],
ix: 3,
},
o: {
a: 0,
k: 100,
ix: 4,
},
w: {
a: 0,
k: 50,
ix: 5,
},
lc: 2,
lj: 1,
ml: 10,
bm: 0,
nm: 'Stroke 1',
mn: 'ADBE Vector Graphic - Stroke',
hd: false,
},
{
ty: 'tr',
p: {
a: 0,
k: [275, 200],
ix: 2,
},
a: {
a: 0,
k: [0, 0],
ix: 1,
},
s: {
a: 0,
k: [100, 100],
ix: 3,
},
r: {
a: 0,
k: 0,
ix: 6,
},
o: {
a: 0,
k: 100,
ix: 7,
},
sk: {
a: 0,
k: 0,
ix: 4,
},
sa: {
a: 0,
k: 0,
ix: 5,
},
nm: 'Transform',
},
],
nm: 'Group 1',
np: 2,
cix: 2,
bm: 0,
ix: 1,
mn: 'ADBE Vector Group',
hd: false,
},
{
ty: 'tm',
s: {
a: 1,
k: [
{
i: {
x: [0.667],
y: [1],
},
o: {
x: [0.715],
y: [0],
},
t: 25,
s: [0],
},
{
i: {
x: [0.667],
y: [1],
},
o: {
x: [0.715],
y: [0],
},
t: 50,
s: [95],
},
{
t: 75.0000030548126,
s: [0],
},
],
ix: 1,
},
e: {
a: 1,
k: [
{
i: {
x: [0.667],
y: [1],
},
o: {
x: [0.754],
y: [0.011],
},
t: 0,
s: [5],
},
{
i: {
x: [0.594],
y: [1],
},
o: {
x: [0.544],
y: [1.487],
},
t: 25,
s: [100],
},
{
i: {
x: [0.521],
y: [1],
},
o: {
x: [0.333],
y: [0],
},
t: 75,
s: [100],
},
{
t: 100.000004073084,
s: [5],
},
],
ix: 2,
},
o: {
a: 0,
k: 0,
ix: 3,
},
m: 1,
ix: 2,
nm: 'Trim Paths 1',
mn: 'ADBE Vector Filter - Trim',
hd: false,
},
],
ip: 0,
op: 200.000008146167,
st: 0,
bm: 0,
},
{
ddd: 0,
ind: 3,
ty: 4,
nm: 'green Outlines',
sr: 1,
ks: {
o: {
a: 0,
k: 100,
ix: 11,
},
r: {
a: 0,
k: 0,
ix: 10,
},
p: {
a: 0,
k: [485.165, 544.076, 0],
ix: 2,
},
a: {
a: 0,
k: [325, 225, 0],
ix: 1,
},
s: {
a: 0,
k: [100, 100, 100],
ix: 6,
},
},
ao: 0,
shapes: [
{
ty: 'gr',
it: [
{
ind: 0,
ty: 'sh',
ix: 1,
ks: {
a: 0,
k: {
i: [
[0, 0],
[-110.457, 0],
[0, -110.457],
],
o: [
[0, -110.457],
[110.457, 0],
[0, 0],
],
v: [
[-200, 100],
[0, -100],
[200, 100],
],
c: false,
},
ix: 2,
},
nm: 'Path 1',
mn: 'ADBE Vector Shape - Group',
hd: false,
},
{
ty: 'st',
c: {
a: 0,
k: [0.275, 0.769000004787, 0.40800000359, 1],
ix: 3,
},
o: {
a: 0,
k: 100,
ix: 4,
},
w: {
a: 0,
k: 50,
ix: 5,
},
lc: 2,
lj: 1,
ml: 10,
bm: 0,
nm: 'Stroke 1',
mn: 'ADBE Vector Graphic - Stroke',
hd: false,
},
{
ty: 'tr',
p: {
a: 0,
k: [325, 225],
ix: 2,
},
a: {
a: 0,
k: [0, 0],
ix: 1,
},
s: {
a: 0,
k: [100, 100],
ix: 3,
},
r: {
a: 0,
k: 0,
ix: 6,
},
o: {
a: 0,
k: 100,
ix: 7,
},
sk: {
a: 0,
k: 0,
ix: 4,
},
sa: {
a: 0,
k: 0,
ix: 5,
},
nm: 'Transform',
},
],
nm: 'Group 1',
np: 2,
cix: 2,
bm: 0,
ix: 1,
mn: 'ADBE Vector Group',
hd: false,
},
{
ty: 'tm',
s: {
a: 1,
k: [
{
i: {
x: [0.667],
y: [1],
},
o: {
x: [0.524],
y: [0],
},
t: 25,
s: [0],
},
{
i: {
x: [0.667],
y: [1],
},
o: {
x: [0.524],
y: [0],
},
t: 50,
s: [95],
},
{
t: 75.0000030548126,
s: [0],
},
],
ix: 1,
},
e: {
a: 1,
k: [
{
i: {
x: [0.667],
y: [1],
},
o: {
x: [0.569],
y: [0],
},
t: 0,
s: [5],
},
{
i: {
x: [0.536],
y: [1],
},
o: {
x: [0.45],
y: [0],
},
t: 25,
s: [100],
},
{
i: {
x: [0.366],
y: [1],
},
o: {
x: [0.333],
y: [0],
},
t: 75,
s: [100],
},
{
t: 100.000004073084,
s: [5],
},
],
ix: 2,
},
o: {
a: 0,
k: 0,
ix: 3,
},
m: 1,
ix: 2,
nm: 'Trim Paths 1',
mn: 'ADBE Vector Filter - Trim',
hd: false,
},
],
ip: 0,
op: 200.000008146167,
st: 0,
bm: 0,
},
{
ddd: 0,
ind: 4,
ty: 4,
nm: 'yellow Outlines',
sr: 1,
ks: {
o: {
a: 0,
k: 100,
ix: 11,
},
r: {
a: 0,
k: 0,
ix: 10,
},
p: {
a: 0,
k: [485.165, 519.076, 0],
ix: 2,
},
a: {
a: 0,
k: [375, 250, 0],
ix: 1,
},
s: {
a: 0,
k: [100, 100, 100],
ix: 6,
},
},
ao: 0,
shapes: [
{
ty: 'gr',
it: [
{
ind: 0,
ty: 'sh',
ix: 1,
ks: {
a: 0,
k: {
i: [
[0, 0],
[-138.071, 0],
[0, -138.071],
],
o: [
[0, -138.071],
[138.071, 0],
[0, 0],
],
v: [
[-250, 125],
[0, -125],
[250, 125],
],
c: false,
},
ix: 2,
},
nm: 'Path 1',
mn: 'ADBE Vector Shape - Group',
hd: false,
},
{
ty: 'st',
c: {
a: 0,
k: [0.961000031116, 0.816000007181, 0.097999999102, 1],
ix: 3,
},
o: {
a: 0,
k: 100,
ix: 4,
},
w: {
a: 0,
k: 50,
ix: 5,
},
lc: 2,
lj: 1,
ml: 10,
bm: 0,
nm: 'Stroke 1',
mn: 'ADBE Vector Graphic - Stroke',
hd: false,
},
{
ty: 'tr',
p: {
a: 0,
k: [375, 250],
ix: 2,
},
a: {
a: 0,
k: [0, 0],
ix: 1,
},
s: {
a: 0,
k: [100, 100],
ix: 3,
},
r: {
a: 0,
k: 0,
ix: 6,
},
o: {
a: 0,
k: 100,
ix: 7,
},
sk: {
a: 0,
k: 0,
ix: 4,
},
sa: {
a: 0,
k: 0,
ix: 5,
},
nm: 'Transform',
},
],
nm: 'Group 1',
np: 2,
cix: 2,
bm: 0,
ix: 1,
mn: 'ADBE Vector Group',
hd: false,
},
{
ty: 'tm',
s: {
a: 1,
k: [
{
i: {
x: [0.667],
y: [1],
},
o: {
x: [0.21],
y: [0],
},
t: 25,
s: [0],
},
{
i: {
x: [0.667],
y: [1],
},
o: {
x: [0.325],
y: [-0.002],
},
t: 50,
s: [95],
},
{
t: 75.0000030548126,
s: [0],
},
],
ix: 1,
},
e: {
a: 1,
k: [
{
i: {
x: [0.667],
y: [1],
},
o: {
x: [0.459],
y: [0.02],
},
t: 0,
s: [5],
},
{
i: {
x: [0.667],
y: [1],
},
o: {
x: [0.386],
y: [3.25],
},
t: 25,
s: [100],
},
{
i: {
x: [0.202],
y: [1],
},
o: {
x: [0.333],
y: [0],
},
t: 75,
s: [100],
},
{
t: 100.000004073084,
s: [5],
},
],
ix: 2,
},
o: {
a: 0,
k: 0,
ix: 3,
},
m: 1,
ix: 2,
nm: 'Trim Paths 1',
mn: 'ADBE Vector Filter - Trim',
hd: false,
},
],
ip: 0,
op: 200.000008146167,
st: 0,
bm: 0,
},
{
ddd: 0,
ind: 5,
ty: 4,
nm: 'red Outlines',
sr: 1,
ks: {
o: {
a: 0,
k: 100,
ix: 11,
},
r: {
a: 0,
k: 0,
ix: 10,
},
p: {
a: 0,
k: [485.165, 494.076, 0],
ix: 2,
},
a: {
a: 0,
k: [425, 275, 0],
ix: 1,
},
s: {
a: 0,
k: [100, 100, 100],
ix: 6,
},
},
ao: 0,
shapes: [
{
ty: 'gr',
it: [
{
ind: 0,
ty: 'sh',
ix: 1,
ks: {
a: 0,
k: {
i: [
[0, 0],
[-165.686, 0],
[0, -165.686],
],
o: [
[0, -165.686],
[165.685, 0],
[0, 0],
],
v: [
[-300, 150],
[0, -150],
[300, 150],
],
c: false,
},
ix: 2,
},
nm: 'Path 1',
mn: 'ADBE Vector Shape - Group',
hd: false,
},
{
ty: 'st',
c: {
a: 0,
k: [0.987999949736, 0.368999974868, 0.349000010771, 1],
ix: 3,
},
o: {
a: 0,
k: 100,
ix: 4,
},
w: {
a: 0,
k: 50,
ix: 5,
},
lc: 2,
lj: 1,
ml: 10,
bm: 0,
nm: 'Stroke 1',
mn: 'ADBE Vector Graphic - Stroke',
hd: false,
},
{
ty: 'tr',
p: {
a: 0,
k: [425, 275],
ix: 2,
},
a: {
a: 0,
k: [0, 0],
ix: 1,
},
s: {
a: 0,
k: [100, 100],
ix: 3,
},
r: {
a: 0,
k: 0,
ix: 6,
},
o: {
a: 0,
k: 100,
ix: 7,
},
sk: {
a: 0,
k: 0,
ix: 4,
},
sa: {
a: 0,
k: 0,
ix: 5,
},
nm: 'Transform',
},
],
nm: 'Group 1',
np: 2,
cix: 2,
bm: 0,
ix: 1,
mn: 'ADBE Vector Group',
hd: false,
},
{
ty: 'tm',
s: {
a: 1,
k: [
{
i: {
x: [0.667],
y: [1],
},
o: {
x: [0.012],
y: [0],
},
t: 25,
s: [0],
},
{
i: {
x: [0.667],
y: [1],
},
o: {
x: [0.176],
y: [0.018],
},
t: 50,
s: [95],
},
{
t: 75.0000030548126,
s: [0],
},
],
ix: 1,
},
e: {
a: 1,
k: [
{
i: {
x: [0.667],
y: [1],
},
o: {
x: [0.318],
y: [0],
},
t: 0,
s: [5],
},
{
i: {
x: [0.304],
y: [0.169],
},
o: {
x: [0.317],
y: [0],
},
t: 25,
s: [100],
},
{
i: {
x: [0.095],
y: [1.006],
},
o: {
x: [0.365],
y: [0.007],
},
t: 75,
s: [100],
},
{
t: 100.000004073084,
s: [5],
},
],
ix: 2,
},
o: {
a: 0,
k: 0,
ix: 3,
},
m: 1,
ix: 2,
nm: 'Trim Paths 1',
mn: 'ADBE Vector Filter - Trim',
hd: false,
},
],
ip: 0,
op: 200.000008146167,
st: 0,
bm: 0,
},
],
markers: [],
})
</script>
# Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| src | URL or inline JSON String | string | — |
| width | width of canvas | number | 240 |
| height | height of canvas | number | 240 |