Thumbprint logo

Loader Dots

Animated control for showing a loading state

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)