Lottie Files animasyonlarına şuradan ulaşabilirsiniz. lottiefiles.com
Örnek lottie files animasyonu kodu;
<lottie-player src="https://assets4.lottiefiles.com/temp/lf20_UsfnhV.json" background="transparent" speed="1" loop autoplay></lottie-player>
<script src="https://unpkg.com/@lottiefiles/[email protected]/dist/lottie-player.js"></script>
Animasyon Önizleme
Yukarıda bulunan kod ile animasyon varsayılan olarak otamatik oynatılmaya başlayacaktır. Önce bunu engellememiz gerekiyor. Bunun için html kod içerisinden autoplay tagını silerek otomatik oynatmayı devre dışı bırakıyoruz. Ardından herhangi bir işlem sonrası animasyonun oynamasını istiyorsak;
$('lottie-player').get(0).play();
İşlem bittiğinde tekrar durmasını istiyorsak ise;
$('lottie-player').get(0).stop();
methodunu kullanıyoruz.
Aşağıda ki demoya gözatabilirsiniz.