Available from v8.0.0
BB.LoadingIndicator
A SwiftUI view that displays an indeterminate loading spinner with design-system-driven coloring and size presets. The component maps to UIKit's UIActivityIndicatorView intent while using SwiftUI's ProgressView under the hood.
Platform availability: iOS 17.0+
When to use:
- Use BB.LoadingIndicator when the duration of an operation is unknown or indeterminate.
- Consider BB.ProgressIndicator when you can measure and display actual progress (0–100%).
Import
import SwiftUI
import BackbaseDesignSystem
Visual reference
|
|
|
|
API reference
BB.LoadingIndicator
Enumerations
Layout
The Layout enumeration defines the size options for the loading indicator.
|
Value |
Description |
|---|---|
|
.default |
Standard size |
|
.large |
Larger size for prominent loading states |
Appearance
The Appearance enumeration defines the contrast style for the surface.
|
Value |
Description |
|---|---|
|
.default |
Uses disabled foreground color for light/neutral backgrounds |
|
.onColor |
Uses on-background brand color for dark/brand-colored backgrounds |
Initializers
init(layout:appearance:)
Creates a new loading indicator with the specified layout and appearance.
|
Parameter |
Type |
Description |
|---|---|---|
|
layout |
Layout |
The size of the loader (defaults to .default) |
|
appearance |
Appearance |
The contrast style for the surface (defaults to .default) |
Methods
appearance(_:)
Applies the specified appearance to the loading indicator.
|
Parameter |
Type |
Description |
|---|---|---|
|
appearance |
Appearance |
The appearance style to apply |
Returns: A modified BB.LoadingIndicator with the specified appearance.
Configuration
|
Property |
Type |
Default |
|---|---|---|
|
layout |
Layout |
.default |
|
appearance |
Appearance |
.default |
layout
The layout property determines the size of the loading indicator. Use .large for prominent loading states that need more visual emphasis.
BB.LoadingIndicator(layout: .large)
appearance
The appearance property determines the color of the loading indicator based on the surface it appears on. Use .onColor when displaying on dark or brand-colored backgrounds.
BB.LoadingIndicator(appearance: .onColor)
Usage
Basic usage
Display a standard loading indicator with default settings.
import SwiftUI
import BackbaseDesignSystem
struct ContentView: View {
var body: some View {
BB.LoadingIndicator()
}
}
Large loader
Use a larger size for prominent loading states.
import SwiftUI
import BackbaseDesignSystem
struct ContentView: View {
var body: some View {
BB.LoadingIndicator(layout: .large)
}
}
On-color appearance
Use the on-color appearance when displaying on dark or brand-colored backgrounds.
import SwiftUI
import BackbaseDesignSystem
struct ContentView: View {
var body: some View {
ZStack {
Color.blue
BB.LoadingIndicator(appearance: .onColor)
}
}
}
Chaining appearance
Apply the appearance modifier after initialization.
import SwiftUI
import BackbaseDesignSystem
struct ContentView: View {
var body: some View {
BB.LoadingIndicator()
.appearance(.onColor)
}
}
Loading state pattern
Display the loading indicator conditionally based on state.
import SwiftUI
import BackbaseDesignSystem
struct ContentView: View {
@State private var isLoading = true
@State private var data: [String] = []
var body: some View {
VStack {
if isLoading {
BB.LoadingIndicator(layout: .large)
} else {
List(data, id: \.self) { item in
Text(item)
}
}
}
.task {
data = await fetchData()
isLoading = false
}
}
}
States and variants
Default size
The standard size for most loading scenarios.
Visual characteristics:
- Compact spinner
- Suitable for inline loading indicators
- Minimal visual footprint
BB.LoadingIndicator(layout: .default)
Large size
The larger size for prominent loading states.
Visual characteristics:
- Larger spinner
- Suitable for full-screen or section loading states
- More visual prominence
BB.LoadingIndicator(layout: .large)
Default appearance
The standard appearance for light or neutral backgrounds.
Visual characteristics:
- Disabled foreground color
- Suitable for white or light gray backgrounds
BB.LoadingIndicator(appearance: .default)
On-color appearance
The appearance for dark or brand-colored backgrounds.
Visual characteristics:
- On-background brand color
- High contrast on dark surfaces
- Suitable for brand-colored or dark backgrounds
ZStack {
Color.blue
BB.LoadingIndicator(appearance: .onColor)
}
Customization
Combining layout and appearance
Combine layout and appearance options for the desired visual effect.
BB.LoadingIndicator(layout: .large, appearance: .onColor)
Best practices
- Choose the correct appearance based on the background color for proper contrast.
- Use .onColor on dark/brand surfaces.
- Use sparingly; prefer a single, centralized indicator per screen.
- When possible, complement with text explaining the loading action.
Accessibility
This component can be configured with accessibility features at the integration level. Use the standard SwiftUI accessibility modifiers to ensure a fully accessible experience for all users.
Accessibility configuration
|
Modifier |
Description |
|---|---|
|
.accessibilityLabel(_:) |
Sets the accessibility label for screen readers |
|
.accessibilityHint(_:) |
Provides additional context for the action |
|
.accessibilityValue(_:) |
Sets the current value for the element |
Best practices
- Provide meaningful accessibility labels that describe the element's purpose.
- Use accessibility hints to provide additional context when needed.
- Ensure all interactive elements are accessible.
BB.LoadingIndicator()
.accessibilityLabel("Descriptive label")
.accessibilityHint("Additional context")
Dependencies
- External dependencies: None
- Internal dependencies: BackbaseDesignSystem
Design tokens
Component styling is applied automatically through the design system's theming infrastructure.
JSON tokens
This component uses semantic tokens only. See Semantic tokens below.
Semantic tokens
|
Token |
API Reference |
Description |
|---|---|---|
|
Foreground (default) |
Theme.colors.foreground.disabled |
Color used for the default appearance on light/neutral backgrounds |
|
Foreground (on color) |
Theme.colors.onBackground.brand |
Color used for the on-color appearance on dark/brand backgrounds |
See also
- BB.ProgressIndicator - For determinate progress display
- BB.Shimmer - For skeleton loading states
- BB.StateView - For loading failure states