Customizing

Every indicator takes the same four kinds of settings: params, color, colors and size. Try them below, then copy the code for your platform.

Params

count

3

minScale

0.30

Color

Theme color Color One color per element

Speed

1.00×

Size

64px

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

<LoaderKit
  indicator="BallPulse"
  size={64}
/>

Params

Some indicators declare params: named numbers with a default value. BallPulse has count (3) and minScale (0.3). Pass the values you want to change. The others keep their default.

HTML

<loader-kit indicator="BallPulse" params='{"count": 5, "minScale": 0.5}'></loader-kit>

TypeScript

const view = new LoaderKitView(host, {
  indicator: 'BallPulse',
  params: { count: 5, minScale: 0.5 },
});

Kotlin (View)

loader.indicator = "BallPulse"
loader.params = mapOf("count" to 5.0, "minScale" to 0.5)

Compose

LoaderKitIndicator(
    indicator = "BallPulse",
    params = mapOf("count" to 5.0, "minScale" to 0.5),
)

Swift (UIKit)

let loader = LoaderKitView(indicator: "BallPulse")
loader.params = ["count": 5, "minScale": 0.5]

SwiftUI

LoaderKitIndicator("BallPulse", params: ["count": 5, "minScale": 0.5])

C#

indicator.Indicator = "BallPulse";
indicator.Params = new Dictionary<string, double> { ["count"] = 5, ["minScale"] = 0.5 };

Rules that apply on every platform:

• A param name the indicator does not declare is ignored. You can switch indicators and keep the same params.
• Counts are rounded to the nearest integer and are at least 1.
• Param values are not range-checked. Keep sizes, counts and stroke widths positive: what an engine draws for out-of-range values is not specified.
• Changing params restarts the animation from the beginning of its cycle.

See Built-in indicators for the list of params, and Params to declare params in your own spec.

Color

One color paints every element. Opacity tracks multiply the alpha of this color.

HTML

<loader-kit indicator="BallPulse" color="#10b981"></loader-kit>

<!-- Without a color attribute, the indicator uses the CSS color of the element -->
<loader-kit indicator="BallPulse" style="color: var(--brand)"></loader-kit>

TypeScript

view.color = '#10b981';   // any CSS color; null means currentColor

Android XML

<io.github.maitrungduc1410.loaderkit.LoaderKitView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:indicatorColor="?attr/colorPrimary" />

Kotlin (View)

loader.color = Color.MAGENTA

Compose

LoaderKitIndicator("BallPulse", color = MaterialTheme.colorScheme.primary)

Swift (UIKit)

loader.color = .systemBlue

SwiftUI

LoaderKitIndicator("BallPulse").color(.accentColor)

XAML

<lk:LoaderKitIndicator Indicator="BallPulse" Color="MediumSeaGreen" />

Default colors:

Platform	Default
Web	the CSS color of the host element (currentColor)
Android View	the theme attribute android:colorForeground
Compose	black, or white when the system is in dark mode
iOS, macOS	systemGray
Windows	white

On Apple platforms, dynamic system colors such as .label follow the light and dark appearance.

Colors

colors gives each element its own color. Element i uses colors[i mod colors.length], so a short list repeats. When colors is set and not empty, it wins over color.

HTML

<loader-kit indicator="BallPulse" colors="#f43f5e, #f59e0b, #10b981"></loader-kit>

TypeScript

view.colors = ['#f43f5e', '#f59e0b', '#10b981'];

Kotlin (View)

loader.colors = intArrayOf(Color.RED, Color.YELLOW, Color.GREEN)

Compose

LoaderKitIndicator("BallPulse", colors = listOf(Color.Red, Color.Yellow, Color.Green))

Swift (UIKit)

loader.colors = [.systemRed, .systemOrange, .systemGreen]

SwiftUI

LoaderKitIndicator("BallPulse").colors([.red, .orange, .green])

C#

indicator.Colors = new[] { Colors.Tomato, Colors.Gold, Colors.MediumSeaGreen };

Element order

Elements are numbered in drawing order. For a row it is left to right, for a grid it is row by row, and for a ring it starts on the right and goes clockwise. In an indicator with several parts, the numbering continues from one part to the next.

Size

Size the view the usual way on each platform. The indicator is drawn in the largest square that fits, centered in the view, so it never stretches. Without a size, the view is 40 by 40.

HTML

<loader-kit indicator="BallPulse" style="width: 64px; height: 64px"></loader-kit>

Android XML

<io.github.maitrungduc1410.loaderkit.LoaderKitView
    android:layout_width="64dp"
    android:layout_height="64dp"
    android:padding="8dp"
    app:indicator="BallPulse" />

Compose

LoaderKitIndicator("BallPulse", Modifier.size(64.dp))

Swift (UIKit)

loader.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
    loader.widthAnchor.constraint(equalToConstant: 64),
    loader.heightAnchor.constraint(equalToConstant: 64),
])

SwiftUI

LoaderKitIndicator("BallPulse").frame(width: 64, height: 64)

XAML

<lk:LoaderKitIndicator Indicator="BallPulse" Width="64" Height="64" />

On Android, the indicator is drawn inside the padding. In SwiftUI, apply the LoaderKit modifiers (color, speed, ...) before SwiftUI modifiers such as frame.

Changing colors or size never restarts the animation.