Bắt đầu

Yêu cầu

Nền tảng	Tối thiểu
Android	minSdk 24
iOS, macOS	iOS 15, macOS 12, Swift 5.9
Windows	Windows 10 version 1809 (build 17763), Windows App SDK 1.8, .NET 8
Web	Trình duyệt bất kỳ có <canvas> và custom element

Cài đặt

npm

npm install @loader-kit/web

yarn

yarn add @loader-kit/web

pnpm

pnpm add @loader-kit/web

Android (Gradle)

dependencies {
    implementation("io.github.maitrungduc1410:loaderkit-core:<version>")
    // Jetpack Compose (đã bao gồm loaderkit-core):
    implementation("io.github.maitrungduc1410:loaderkit-compose:<version>")
}

Swift Package Manager

dependencies: [
    .package(url: "https://github.com/maitrungduc1410/loader-kit.git", from: "<version>"),
],
targets: [
    .target(name: "App", dependencies: [.product(name: "LoaderKit", package: "loader-kit")]),
]

CocoaPods

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

NuGet

dotnet add package LoaderKit.WinUI

• Thay <version> bằng bản mới nhất trên GitHub releases. Tag không có tiền tố v.
• Android: cả hai artifact đều nằm trên Maven Central, nên trong repositories phải có mavenCentral().
• Apple: trong Xcode bạn cũng có thể vào File > Add Package Dependencies rồi nhập URL của repo. Pod này không có trên CocoaPods trunk: hãy trỏ Podfile tới repo kèm một tag release.
• Windows: cài LoaderKit.WinUI là có luôn LoaderKit.Core.
• React Native: xem React Native.

Indicator đầu tiên

Indicator có sẵn hay progress?

• Không bao giờ có % (chờ request, pull to refresh): dùng indicator có sẵn, như ví dụ bên dưới. 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.

Mỗi đoạn code dưới đây hiển thị BallSpinFadeLoader màu tím, nhanh gấp 1.5 lần bình thường.

React

import { LoaderKit } from '@loader-kit/web/react';

<LoaderKit indicator="BallSpinFadeLoader" color="#7c3aed" speed={1.5} />

Vue

<script setup lang="ts">
import { LoaderKit } from '@loader-kit/web/vue';
</script>

<template>
  <LoaderKit indicator="BallSpinFadeLoader" color="#7c3aed" :speed="1.5" />
</template>

Svelte

<script lang="ts">
  import { LoaderKit } from '@loader-kit/web/svelte';
</script>

<LoaderKit indicator="BallSpinFadeLoader" color="#7c3aed" speed={1.5} />

HTML

<script type="module">
  import '@loader-kit/web/element';
</script>

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

TypeScript

import { LoaderKitView } from '@loader-kit/web';

const view = new LoaderKitView(document.querySelector('#loader')!, {
  indicator: 'BallSpinFadeLoader',
  color: '#7c3aed',
  speed: 1.5,
});

Android XML

<io.github.maitrungduc1410.loaderkit.LoaderKitView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:indicator="BallSpinFadeLoader"
    app:indicatorColor="#7C3AED"
    app:speed="1.5" />

Kotlin (View)

import io.github.maitrungduc1410.loaderkit.LoaderKitView

val loader = LoaderKitView(context).apply {
    indicator = "BallSpinFadeLoader"
    color = Color.parseColor("#7C3AED")
    speed = 1.5
}
container.addView(loader)

Compose

import io.github.maitrungduc1410.loaderkit.compose.LoaderKitIndicator

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

Swift (UIKit)

import LoaderKit

let loader = LoaderKitView(indicator: "BallSpinFadeLoader")
loader.color = .systemPurple
loader.speed = 1.5
view.addSubview(loader)

SwiftUI

import LoaderKit
import SwiftUI

struct LoadingView: View {
    var body: some View {
        LoaderKitIndicator("BallSpinFadeLoader")
            .color(.purple)
            .speed(1.5)
            .frame(width: 48, height: 48)
    }
}

XAML

<Page xmlns:lk="using:LoaderKit.WinUI">
    <lk:LoaderKitIndicator Indicator="BallSpinFadeLoader" Color="#7C3AED" Speed="1.5" />
</Page>

C#

using LoaderKit.WinUI;
using Microsoft.UI;

var indicator = new LoaderKitIndicator
{
    Indicator = "BallSpinFadeLoader",
    Color = ColorHelper.FromArgb(255, 0x7C, 0x3A, 0xED),
    Speed = 1.5,
};

Kết quả:

Kích thước mặc định

Nếu bạn không đặt kích thước, mọi view đều có kích thước 40 x 40 (dp, point, effective pixel hoặc CSS pixel). Indicator được vẽ trong hình vuông lớn nhất vừa với view, căn giữa. Vì vậy với một view bề ngang rộng, indicator vẫn nằm giữa chứ không bị kéo giãn.

Dừng indicator

Indicator bắt đầu chạy animation ngay khi được hiển thị. Xong việc thì bạn dừng nó lại. Mặc định, indicator đã dừng sẽ không vẽ gì cả.

TypeScript

view.stop();      // hoặc view.animating = false
view.destroy();   // khi bạn gỡ hẳn nó đi

Kotlin (View)

loader.stop()     // hoặc loader.isAnimating = false

Compose

LoaderKitIndicator("BallSpinFadeLoader", animating = isLoading)

Swift (UIKit)

loader.stopAnimating()   // hoặc loader.isAnimating = false

SwiftUI

LoaderKitIndicator("BallSpinFadeLoader").animating(isLoading)

C#

indicator.IsAnimating = false;

Xem Điều khiển animation để chỉnh tốc độ, freeze một frame và xử lý reduce motion.

Tiếp theo

• Indicator có sẵn: chọn một indicator.
• Progress indicator: cho biết tác vụ đã chạy được bao nhiêu.
• Tùy chỉnh: params, màu và kích thước.
• Các trang theo nền tảng: Web, Android, iOS và macOS, Windows.