LoaderKitLoading indicators as data, rendered natively

One JSON spec, the same motion on Android, iOS, macOS, Windows and the web. Pick one of 50 built-in indicators or 50 progress designs, or describe your own.

Built-in indicators

Progress indicators

Get started

What is LoaderKit?

🎛️

50 built-in indicators

Pulses, spinners, bars, grids and orbits, with the same names on every platform. Some take params such as count and minScale.

See them all

📊

50 progress designs

Linear, circular, pie, gauge, liquid, border, bars, grid, battery and hourglass, with a value or indeterminate, gliding smoothly to every new value.

Progress indicators

📱

Native on every platform

Canvas on Android (View and Compose), Core Animation on iOS and macOS (UIKit, AppKit, SwiftUI), Composition on Windows, canvas on the web.

Install

🎯

Same motion everywhere

Every engine follows one specification and runs the same conformance test vectors, so an indicator looks and moves the same on each platform.

Read the spec

⏯️

Playback you control

Speed, start and stop, hide when stopped, freeze any frame for screenshots, and a still frame when the user asks for reduced motion.

Playback

✏️

Your own indicators

Describe elements, a layout, a shape and keyframe tracks in JSON. Every engine draws it with no new native code. (Experimental)

Custom indicators

🧰

Tools for spec authors

A live playground, a JSON Schema for editor hints and CI checks, and a guide to writing specs with an AI assistant.

Open the playground

Find an indicator, copy the code

Built-in indicators

50 loading indicators, with the same names and motion on every platform.

Browse all 50 indicators

Progress indicators

50 progress designs, with a value or indeterminate.

Browse all 50 designs

Search, tune, copy. Code for React, Vue, Svelte, HTML, Android, Compose, UIKit, SwiftUI, WinUI and React Native.

Built-in or progress?

No percentage, ever (waiting for a request, pull to refresh): use a built-in indicator. There are 50 styles to pick from.
The task has progress, even if it is unknown at first (a download, an upload, processing a file): use a progress indicator. Start it indeterminate with value null (nil in Swift), then set a value once you know it. It is the same component, so nothing else changes.

Install

npm install @loader-kit/web

kotlin

dependencies {
    implementation("io.github.maitrungduc1410:loaderkit-core:<version>")
    // Jetpack Compose (includes loaderkit-core):
    implementation("io.github.maitrungduc1410:loaderkit-compose:<version>")
}

swift

.package(url: "https://github.com/maitrungduc1410/loader-kit.git", from: "<version>")

ruby

pod 'LoaderKit', :git => 'https://github.com/maitrungduc1410/loader-kit.git', :tag => '<version>'

dotnet add package LoaderKit.WinUI

npm install react-native-loader-kit

See Getting started for the first indicator on each platform.

One line per platform

tsx

<LoaderKit indicator="BallSpinFadeLoader" color="#7c3aed" />

html

<loader-kit indicator="BallSpinFadeLoader" color="#7c3aed"></loader-kit>

kotlin

LoaderKitIndicator("BallSpinFadeLoader", Modifier.size(48.dp), color = Color(0xFF7C3AED))

swift

LoaderKitIndicator("BallSpinFadeLoader").color(.purple)

xml

<lk:LoaderKitIndicator Indicator="BallSpinFadeLoader" Color="#7C3AED" />

LoaderKitLoading indicators as data, rendered natively

50 built-in indicators

50 progress designs

Native on every platform

Same motion everywhere

Playback you control

Your own indicators

Tools for spec authors

Find an indicator, copy the code ​

Built-in indicators

Progress indicators

Install ​

One line per platform ​

Find an indicator, copy the code

Install

One line per platform