Lottie in HTML

On a plain web page, the simplest player is the dotLottie web component from LottieFiles. You add one script tag, then a <dotlottie-wc> element that points at your file. It plays both .lottie and .json files.

Install

Nothing to install. The player loads from a CDN with one script tag. It is pinned to a version, so a new release can't change your page without you knowing.

<script type="module" src="https://cdn.jsdelivr.net/npm/@lottiefiles/dotlottie-wc@0.10.0/dist/dotlottie-wc.js"></script>

Checked on 7 October 2026: @lottiefiles/dotlottie-wc 0.10.0 on npm. With a bundler, run npm install @lottiefiles/dotlottie-wc and add import '@lottiefiles/dotlottie-wc'; once instead of the script tag.

A working example

This plays the Bouncing dots loading animation from the free library. Download its dotLottie file, then:

1. Put bouncing-dots.lottie in your site's animations folder, so it loads from /animations/bouncing-dots.lottie.

2. Paste this where it should play.

<script type="module" src="https://cdn.jsdelivr.net/npm/@lottiefiles/dotlottie-wc@0.10.0/dist/dotlottie-wc.js"></script>

<div role="status" aria-label="Loading">
  <dotlottie-wc src="/animations/bouncing-dots.lottie" autoplay loop data-still="0.492"
    style="display: block; width: 64px; height: 64px"></dotlottie-wc>
</div>

<script>
  // People who ask for less motion see a still frame: data-still is how far in, from 0 to 1.
  if (matchMedia('(prefers-reduced-motion: reduce)').matches) {
    const players = document.querySelectorAll('dotlottie-wc');
    players.forEach((el) => el.removeAttribute('autoplay'));
    customElements.whenDefined('dotlottie-wc').then(() => players.forEach((el) => {
      const player = el.dotLottie;
      if (!player || !el.dataset.still) return;
      const show = () => player.setFrame(Math.round(Number(el.dataset.still) * (player.totalFrames - 1)));
      if (player.isLoaded) show();
      else player.addEventListener('load', show);
    }));
  }
</script>

The last script runs before the player starts. If the visitor has asked their device for less motion, it removes autoplay and, once the file loads, shows the frame that data-still names (how far into the animation, from 0 to 1). Here that is a frame 49% of the way in, where the animation is complete, so nothing moves and they still see the whole picture.

Every animation in the library has this code on its page with its own file name filled in.

Common problems

Nothing shows on a page opened from your computer

Most browsers stop a page opened straight from disk (a file:// address) from downloading other files, so the player never gets the animation. Run a small local web server in the folder, or upload the page, and open it over http.

The file is on another domain

The player downloads the file with an ordinary web request. A file on a different domain only loads if that server sends a CORS header that allows your site. Keep the file on your own domain when you can.

A strict Content Security Policy blocks it

By default the player loads its WebAssembly file from a CDN. If your policy blocks that, host the file yourself and point the player at it with setWasmUrl. The package README has a section on strict policies.

The page jumps while it loads

Give the element a width and a height, or a width and an aspect ratio, like the example does. The space is held before the file arrives.

Two animations on one page

Load the script tag once and add as many <dotlottie-wc> elements as you need. The reduced motion script covers all of them.

Free downloads

The editor and every export format are free, with no card and no Mosso watermark. Library downloads need a free account. You can download up to 50 library animations a day, with the limit resetting at midnight UTC. Each download contains one animation.

Create a free account or sign in to download from the library. Read the library licence before sharing the finished work.

The same code for other platforms: React, React Native, Flutter, SwiftUI, Android Compose, Webflow, Framer, WordPress.