How to create a Lottie animation

Start with a looping loader

Create your first animation by customizing the spinner above. Follow the steps below to edit its appearance, adjust the loop, and export. To animate your own artwork instead, follow the Figma to Lottie guide or SVG logo tutorial.

Watch the walkthrough

The recording shows the same controls on the spinner template page. It has no audio; captions describe each action.

1. Preview the starting loop

If the preview is paused, press Play above. The spinner starts with a 600 by 600 canvas, 30 frames per second, and a two-second rotation. Its twelve segments move around the center and return to their starting positions. Opacity varies around the ring so the direction is visible.

2. Match your interface color

Use the color control to replace the purple. Try #2864DC for blue. This changes the artwork, not just the preview background, and your edited color carries into the downloaded project.

3. Make a one-second loop

Set Speed to 2×. The duration becomes one second and the keyframes move proportionally. Unlike a tool's preview-speed control, this template setting changes the project timing that you take into the editor.

Keep the motion linear for continuous rotation. Easing into a stop on each revolution makes a loader appear to hesitate.

4. Keep editing or save the project

Choose Open in editor to adjust segment shapes and keyframes. Or choose Download editable project to save a .motion backup with your current color and speed. You can drop that file back into Lottieditor later. A .motion file is an editing project, not a file for a Lottie player.

5. Check the exported loop

For Lottie JSON or dotLottie exports from the editor, use Pro. Free accounts have five watermarked GIF exports per month. Project backups are available on every plan.

Open a Lottie export in the preview tool. Check First frame and Last frame, then play several cycles. The final displayed frame is one frame before the loop boundary, so a small step is expected. Watch for a pause, a large jump, or cropped segments. Check at the actual display size in your app as well.

Use the spinner as a loading state

Show the animation while work is pending and remove it when the task finishes. Keep a text label such as Loading available to assistive technology. Offer a static state when reduced motion is requested. The animation itself does not detect progress or change your app's state.

Try typing dots for chat · Finish with a success checkmark · Editor export plans