LoaderKitLoading indicator dạng dữ liệu, render native

Một spec JSON, cùng một chuyển động trên Android, iOS, macOS, Windows và web. Chọn một trong 50 indicator có sẵn hay 50 mẫu progress, hoặc tự mô tả indicator của bạn.

Indicator có sẵn

Progress indicator

Bắt đầu

LoaderKit là gì?

🎛️

50 indicator có sẵn

Pulse, spinner, bar, grid và orbit, cùng một tên trên mọi nền tảng. Một số indicator nhận params, ví dụ count và minScale.

Xem tất cả

📊

50 mẫu progress

Linear, circular, pie, gauge, liquid, border, bars, grid, battery và hourglass, có value hoặc vô định, chạy mượt tới mỗi value mới.

Progress indicator

📱

Native trên mọi nền tảng

Canvas trên Android (View và Compose), Core Animation trên iOS và macOS (UIKit, AppKit, SwiftUI), Composition trên Windows, canvas trên web.

Cài đặt

🎯

Chuyển động giống hệt nhau

Mọi engine đều theo cùng một bản đặc tả và chạy chung bộ test vector conformance, nên indicator trông và chuyển động như nhau trên từng nền tảng.

Đọc bản đặc tả

⏯️

Bạn toàn quyền điều khiển

Chỉnh tốc độ, start và stop, ẩn khi dừng, freeze một frame bất kỳ để chụp screenshot, và hiện frame tĩnh khi người dùng bật reduce motion.

Điều khiển animation

✏️

Indicator của riêng bạn

Mô tả phần tử, layout, shape và các track keyframe bằng JSON. Engine nào cũng vẽ được, không cần viết thêm code native. (Thử nghiệm)

Indicator tùy chỉnh

🧰

Công cụ cho người viết spec

Playground preview trực tiếp, JSON Schema để editor gợi ý và để check trong CI, cùng hướng dẫn viết spec với trợ lý AI.

Mở playground

Tìm indicator, copy code

Indicator có sẵn

50 loading indicator, cùng tên và cùng chuyển động trên mọi nền tảng.

Xem đủ 50 indicator

Progress indicator

50 mẫu progress, có value hoặc vô định.

Xem đủ 50 mẫu

Tìm, chỉnh, copy. Có code cho React, Vue, Svelte, HTML, Android, Compose, UIKit, SwiftUI, WinUI và React Native.

Indicator có sẵn hay progress?

Không bao giờ có % (chờ request, pull to refresh): dùng indicator có sẵn, có 50 kiểu để chọn.
Tác vụ có tiến độ, kể cả khi lúc đầu chưa biết (download, upload, xử lý file): dùng progress indicator. Bắt đầu ở chế độ vô định với value là null (nil trong Swift), rồi đặt value khi đã biết. Vẫn là một component, nên không phải đổi gì khác.

Cài đặt

npm install @loader-kit/web

kotlin

dependencies {
    implementation("io.github.maitrungduc1410:loaderkit-core:<version>")
    // Jetpack Compose (đã bao gồm 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

Xem Bắt đầu để hiển thị indicator đầu tiên trên từng nền tảng.

Mỗi nền tảng một dòng code

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 indicator dạng dữ liệu, render native

50 indicator có sẵn

50 mẫu progress

Native trên mọi nền tảng

Chuyển động giống hệt nhau

Bạn toàn quyền điều khiển

Indicator của riêng bạn

Công cụ cho người viết spec

Tìm indicator, copy code ​

Indicator có sẵn

Progress indicator

Cài đặt ​

Mỗi nền tảng một dòng code ​

Tìm indicator, copy code

Cài đặt

Mỗi nền tảng một dòng code