我如何在我的项目中使用 useanimations.com 提供的图标

Question

I am trying to use icons provided by useanimations.com in my project but after downloading a specific icon, I don't know what to do with the json file of icon...and somehow also the animation in not running? please help

Answer 1

This site explains how to set up the Lottie Player to run the animations and then link to the animations.

https://lottiefiles.com/blog/working-with-lottie/how-to-add-lottie-animation-in-web-page

Step 1: Add the following script to the head section of the page:

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

Step 2: Get the URL of the animation either by uploading it to your website or use the public link

Step 3: Copy and paste the below code where you want it to appear on your site. The URL should be the link to the Lottie animation file.

<lottie-player src="<URL HERE>" background="transparent"  speed="1"  style="width: 300px; height: 300px;" loop controls autoplay></lottie-player>

That's it.

Answer 2

Use Lotties player

Source : https://lottiefiles.com/web-player

 <script src="https://unpkg.com/@lottiefiles/lottie-player@0.4.0/dist/lottie-player.js"></script> <lottie-player id="firstLottie" src="https://assets8.lottiefiles.com/packages/lf20_rx3jheuy.json" style="width:200px; height: 200px;" autoplay loop></lottie-player>