Loading Text in SVG Animations
Prerequisites
Needs Lottie library
- "lottie-react": "^2.4.0",
Usage
- import json file:
import loadingAnimation from "../utils/loading.json";
...
<Lottie className="w-1/2" animationData={loadingAnimation} loop={true} />
Code
{
"v": "5.5.7",
"fr": 60,
"ip": 0,
"op": 120,
"w": 1920,
"h": 1080,
"nm": "Comp 1",
"ddd": 0,
"assets": [],
"layers": [
{
"ddd": 0,
"ind": 1,
"ty": 4,
"nm": "Shape Layer 1",
"sr": 1,
"ks": {
"o": {
"a": 0,
"k": 100,
"ix": 11
},
"r": {
"a": 0,
"k": 0,
"ix": 10
},
"p": {
"a": 0,
"k": [960, 540, 0],
"ix": 2
},
"a": {
"a": 0,
"k": [0, 0, 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],
[-10.667, 3.001],
[-23.333, 40],
[31.333, 0],
[-48.66, -0.777],
[-18.471, 0],
[0, 0],
[0, 0.81],
[-29.682, 0],
[18.667, 0],
[-33.333, 0],
[-24, 0],
[0, 0],
[20.167, 0],
[-4.893, -12.386],
[-15.864, 22.606],
[0, 0],
[-4.565, -11.248],
[-7.334, 11.5],
[-19.333, 0],
[0, 0],
[0, -0.063],
[0, -31.5],
[-7.361, 0],
[-0.557, 0.835],
[32.667, 0],
[-16.667, -32.5],
[-11.333, 0],
[0, 54],
[-26.333, 0],
[-11, 0],
[-4.333, 0],
[-18.667, 0],
[-21.666, 0],
[-44, 0],
[0, 0],
[9.333, 0],
[-31.084, -9.992],
[0, 36],
[0, -37.096],
[13.683, 36.943],
[-22.667, 26.5],
[-3.861, 9.122],
[0, 0]
],
"o": [
[0, 0],
[48.851, -13.742],
[23.333, -40],
[-37.333, 0],
[31.334, 0.5],
[1.529, 0],
[0, 0],
[-18.492, 14.509],
[42.667, 0],
[-17.333, 0],
[27.333, 0],
[19.333, 0],
[0, 0],
[-26.671, 0],
[5.333, 13.5],
[6.666, -9.5],
[0, 0],
[9.333, 23],
[5.807, -9.108],
[0, -0.125],
[0, 0],
[-2.502, 0.156],
[0, 15.5],
[16.306, 0],
[14.333, -21.5],
[-30.001, 0],
[3.541, 6.907],
[13.668, 0],
[0, -16.875],
[30.667, 0],
[11, 0],
[4.333, 0],
[15.333, 0],
[43, 0],
[11, 0],
[0, 0],
[-32.667, 0],
[4.667, 1.5],
[0, -14.002],
[0, 28],
[-6.666, -18],
[17.431, -20.378],
[1.666, -3.938],
[0, 0]
],
"v": [
[-1322.667, 78],
[-437.333, 79.999],
[-306, 3],
[-283.333, -163],
[-280.667, 61],
[-222.196, -1.487],
[-221.333, -2],
[-230.175, 1.491],
[-216.667, 61],
[-200.667, -8],
[-177.333, 40.5],
[-119.333, -8],
[-97.334, 0.5],
[-118.917, -7.875],
[-148, 46.5],
[-111.333, 45],
[-105.333, 20],
[-100, 48],
[-61.333, 43.5],
[-17.667, -7.75],
[-15.5, -7.375],
[-18.917, -7.625],
[-50.167, 35],
[-34.306, 58.279],
[-8.667, 33.75],
[14.667, -144.5],
[1.334, 33],
[23.333, 57.75],
[62.834, -17.75],
[77.667, 64],
[139.333, -13.25],
[145.333, 56.75],
[193.667, -5],
[211.333, 61],
[283.667, -6.75],
[303, 2.25],
[283.667, -6.75],
[264.333, 58.75],
[293.667, 17.25],
[292.667, 184.5],
[253.333, 215],
[282.667, 111.5],
[342.333, 13.938],
[1286.671, 12]
],
"c": false
},
"ix": 2
},
"nm": "Path 1",
"mn": "ADBE Vector Shape - Group",
"hd": false
},
{
"ty": "gs",
"o": {
"a": 0,
"k": 100,
"ix": 9
},
"w": {
"a": 0,
"k": 11,
"ix": 10
},
"g": {
"p": 3,
"k": {
"a": 0,
"k": [0, 0.986, 0.511, 0.511, 0.5, 0.984, 0.487, 0.666, 1, 0.983, 0.463, 0.82],
"ix": 8
}
},
"s": {
"a": 0,
"k": [0, 0],
"ix": 4
},
"e": {
"a": 0,
"k": [100, 0],
"ix": 5
},
"t": 1,
"lc": 2,
"lj": 2,
"bm": 0,
"nm": "Gradient Stroke 1",
"mn": "ADBE Vector Graphic - G-Stroke",
"hd": false
},
{
"ty": "tr",
"p": {
"a": 0,
"k": [0, 0],
"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": "Shape 1",
"np": 3,
"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.333],
"y": [0]
},
"t": 0,
"s": [0]
},
{
"i": {
"x": [0.667],
"y": [1]
},
"o": {
"x": [0.333],
"y": [0]
},
"t": 90,
"s": [20.6]
},
{
"t": 119,
"s": [100]
}
],
"ix": 1
},
"e": {
"a": 1,
"k": [
{
"i": {
"x": [0.667],
"y": [1]
},
"o": {
"x": [0.333],
"y": [0]
},
"t": 0,
"s": [0]
},
{
"i": {
"x": [0.667],
"y": [1]
},
"o": {
"x": [0.333],
"y": [0]
},
"t": 30,
"s": [81.05]
},
{
"t": 119,
"s": [100]
}
],
"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": 120,
"st": 0,
"bm": 0
}
],
"markers": []
}