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

brand theme example

Muted

muted theme example

Inverse

inverse theme example

Sizes

Small

small size example

Medium

medium size example

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)

loader view example