Components

Loader Dots

Animated control for showing a loading state

Usage

TPLoaderDots should be implemented inside a view that displays the loading state. Like a view or button which performs network request.

Example 1

// Declare a isLoading environment variable which needs to be passed
// to the loading indicator for toggling the loading state.
@Environment(\.isLoading) private var isLoading: Bool
TPLoaderDots(size: size, theme: theme)
    .environment(\.isLoading, isLoading)

Example 2

Rectangle()
    .frame(width: 200, height: 40, alignment: .center)
    .tpLoaderDots(
        isLoading: isLoading,
        size: .medium,
        theme: .brand,
        hideViewOnLoading: true
    )

Themes

Brand

Muted

Inverse

Sizes

Small

Medium

Custom Theme and Size

Define custom theme and size and set it to loader dots.

let customTheme = TPLoaderDots.Theme(color: Color)
let customSize = TPLoaderDots.Size(size: CGFloat, spacing: CGFloat)
TPLoaderDots(size: customSize, theme: customTheme)

Loader View

Loader view provides loader dots inside a square box that can be used in any view with tpLoaderView method globally available for all views.

VStack {
  Image(icon: .contentActionsAudioMedium)
    .frame(width: 300, height: 300, alignment: .center)
}
.tpLoaderView(isLoading: isLoading, size: .medium, theme: .inverse)