# Lottie Pagination

> An animated pagination dots indicator — Lottie JSON. A Lottie (JSON) animation — portable motion that plays identically on web and app via lottie-web. Honors prefers-reduced-motion (don't autoplay). Reserve Lottie for motion that earns its ~160KB runtime.

- Skill: `nexu-io/lottie-pagination` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds@latest add nexu-io/lottie-pagination`
- Raw SKILL.md: https://api.skillmd.com/api/skills/nexu-io/lottie-pagination/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: Nexu (https://skillmd.com/u/nexu-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/nexu-io/lottie-pagination

---


# Lottie · Pagination

An animated pagination dots indicator — Lottie JSON. Lottie JSON from [spemer/lottie-animations-json](https://github.com/spemer/lottie-animations-json)
(MIT). Part of [motion-anything](https://github.com/nexu-io/motion-anything); obeys `MOTION-SPEC.md`.

## When to use it
- Portable JSON motion identical on web & app; icon/control micro-animations (incl. After Effects / Jitter exports).

## When NOT to use it (restraint)
- When a pure-CSS effect would do — don't ship the Lottie runtime for a simple fade.

## How to apply
1. Include `lottie.min.js` (runtime) and `animation.json`.
2. `lottie.loadAnimation({ container, renderer:'svg', loop:true, autoplay:false, path:'animation.json' })`; start on intent / guard reduced-motion.

## Accessibility & performance
- `prefers-reduced-motion`: don't autoplay. SVG renderer; motion-as-JSON (portable, AI-readable).