# LoaderKit > Loading indicators described as JSON data and rendered natively on Android (View, Jetpack Compose), iOS and macOS (UIKit, AppKit, SwiftUI), Windows (WinUI 3) and the web (React, Vue and Svelte components, a custom element, a canvas class). One spec format, one conformance suite, the same motion everywhere. LoaderKit ships 50 built-in indicators (BallPulse, BallSpinFadeLoader, LineScale, ...), some with params such as `count` and `minScale`. A custom indicator is a schema v1 spec: groups of elements placed in a unit box by a layout (single, stack, row, grid, ring), drawn with a shape (circle, rect, ring, triangle, line), and animated by keyframe tracks (scale, opacity, rotate, translate, strokeStart, strokeEnd) with cubic bezier easing and per-element stagger. Writing custom specs is experimental: a minor release may change the schema; built-in names and params are stable. LoaderKit also ships `LoaderKitProgress` (`` on the web): 50 progress designs across 10 types (linear, circular, pie, gauge, liquid, border, bars, grid, battery, hourglass), each with a value in [0, 1] or indeterminate (null), gliding smoothly between values by default. Progress designs are built in, not JSON specs. Key facts for generating specs: - Every spec needs `"schemaVersion": 1`, a `name`, a positive `duration` in seconds, a `layout`, a `shape` and at least one track (or a non-empty `parts` list). - Coordinates are fractions of a unit box, origin top-left, y down. Angles are radians, positive is clockwise. - Validate with the JSON Schema below, or with `validate()` from `@loader-kit/spec`. ## Guide - [What is LoaderKit?](https://maitrungduc1410.github.io/loader-kit/guide/): What LoaderKit is: loading indicators written as JSON specs and drawn by native engines on each platform, how the pieces fit, and which parts are stable. - [Getting started](https://maitrungduc1410.github.io/loader-kit/guide/getting-started): Install LoaderKit on the web, Android, iOS, macOS or Windows and show your first loading indicator in a few lines, with code for every UI framework. - [Built-in indicators](https://maitrungduc1410.github.io/loader-kit/guide/indicators): Browse the 50 built-in LoaderKit indicators live, tune their params, colors and speed, and copy ready-made code for the web, Android, Apple and Windows. - [Params, colors and size](https://maitrungduc1410.github.io/loader-kit/guide/customizing): Customize a LoaderKit indicator: override params such as count, set one color or a color per element, and size the view on every platform. - [Playback](https://maitrungduc1410.github.io/loader-kit/guide/playback): Control LoaderKit playback: speed, start and stop, hide when stopped, freeze a frame with cycleProgress, and respect the reduced motion setting. - [Progress indicators](https://maitrungduc1410.github.io/loader-kit/guide/progress): LoaderKitProgress: 50 progress designs (linear, circular, pie, gauge, liquid, border, bars, grid, battery, hourglass), determinate or indeterminate, with smooth value changes on the web, Android, iOS, macOS and Windows. - [FAQ](https://maitrungduc1410.github.io/loader-kit/guide/faq): Answers about LoaderKit performance, accessibility, how it compares with GIF, Lottie and CSS spinners, and fixes for indicators that do not show up. ## Platforms - [Web](https://maitrungduc1410.github.io/loader-kit/platforms/web): Use LoaderKit on the web with @loader-kit/web: React, Vue and Svelte components, the custom element, the LoaderKitView canvas class and server-side rendering. - [Android](https://maitrungduc1410.github.io/loader-kit/platforms/android): Use LoaderKit on Android: install from Maven Central, LoaderKitView in XML or Kotlin, the Jetpack Compose LoaderKitIndicator, and loading custom specs. - [iOS and macOS](https://maitrungduc1410.github.io/loader-kit/platforms/apple): Use LoaderKit on iOS and macOS: install with Swift Package Manager or CocoaPods, LoaderKitView for UIKit and AppKit, the SwiftUI view, and custom specs. - [Windows](https://maitrungduc1410.github.io/loader-kit/platforms/windows): Use LoaderKit on Windows: install the LoaderKit.WinUI NuGet package, add the LoaderKitIndicator control in XAML or C#, and load custom specs. - [React Native](https://maitrungduc1410.github.io/loader-kit/platforms/react-native): Use LoaderKit in React Native: install react-native-loader-kit, draw the 50 built-in indicators with LoaderKitView, show progress with LoaderKitProgress, write custom specs and migrate from version 4. ## Custom indicators (experimental) - [Your first indicator](https://maitrungduc1410.github.io/loader-kit/spec/): Build your first custom LoaderKit indicator step by step: a JSON spec with a layout, a shape and keyframe tracks, previewed live at every step. - [Layouts](https://maitrungduc1410.github.io/loader-kit/spec/layouts): LoaderKit spec layouts: place elements in the unit box with single, stack, row, grid and ring, and see how each field changes the element boxes. - [Shapes](https://maitrungduc1410.github.io/loader-kit/spec/shapes): LoaderKit spec shapes: circle, arc, rect, ring with segments and stroke trimming, triangle and line, each with a live example you can scrub. - [Tracks and easing](https://maitrungduc1410.github.io/loader-kit/spec/tracks): LoaderKit spec tracks: animate scale, opacity, rotation, translation and stroke trim with keyTimes, values and easing, with live curves and timelines. - [Timing and stagger](https://maitrungduc1410.github.io/loader-kit/spec/timing): LoaderKit spec timing: stagger elements, give each its own duration, set rest values, combine parts, move whole groups and add 3D perspective. - [Params](https://maitrungduc1410.github.io/loader-kit/spec/params): Make a LoaderKit spec configurable: declare params with defaults, reference them with $param anywhere a number is allowed, and override them per view. - [Loading specs at runtime](https://maitrungduc1410.github.io/loader-kit/spec/using): Load a custom LoaderKit spec at runtime on the web, Android, iOS, macOS and Windows, validate it, read its errors, and stay within the engine limits. - [Spec reference](https://maitrungduc1410.github.io/loader-kit/spec/reference): The normative LoaderKit indicator specification, schema version 1: units, params, layouts, shapes, tracks, easing, rendering, playback and validation. ## Tools - [Playground](https://maitrungduc1410.github.io/loader-kit/tools/playground): Write a LoaderKit indicator spec in the browser with schema hints and live validation, preview it at any size, then share it with a link. - [JSON Schema](https://maitrungduc1410.github.io/loader-kit/tools/json-schema): Use the LoaderKit JSON Schema for editor hints in VS Code and JetBrains IDEs, validate specs in CI with ajv, and learn what only validate() can check. - [Writing specs with AI](https://maitrungduc1410.github.io/loader-kit/tools/ai): Write LoaderKit specs with an AI assistant: a describe, generate, validate and preview loop, copyable prompts, and a checklist of common AI mistakes. ## Schema and source - [JSON Schema v1](https://maitrungduc1410.github.io/loader-kit/schema/v1.json): the schema of a spec, for editors and validators - [SPEC.md](https://github.com/maitrungduc1410/loader-kit/blob/master/SPEC.md): the normative spec that every engine follows - [GitHub repository](https://github.com/maitrungduc1410/loader-kit): source, issues and releases ## Optional - [llms-full.txt](https://maitrungduc1410.github.io/loader-kit/llms-full.txt): SPEC.md and the guide to writing specs with AI in one file