Available from v1.0.0

LoadingIndicator

LoadingIndicator is a styled activity indicator that can be applied to a UIActivityIndicatorView component for showing loading states.

Platform availability: iOS 17.0+

When to use:

• Use LoadingIndicator when you need to show indeterminate loading progress with design system theming.
• Consider using ProgressIndicator when you can display determinate progress with a known completion percentage.
• Consider using StateView when loading failures or empty states need to be communicated with additional context.

It includes the following features:

• Design system themed appearance.
• Default color of .systemGray.
• Easy integration with native UIKit components.

Import

                                                        
                                                        
                                                            import BackbaseDesignSystem
                                                        
                                                            

Visual reference

API reference

loadingIndicator Style

The loadingIndicator style can be applied to a UIActivityIndicatorView component.

Styling properties

Usage

Basic usage

                                                        
                                                        
                                                            let activityIndicator = UIActivityIndicatorView()
                                                        DesignSystem.shared.styles.loadingIndicator(activityIndicator)
                                                        
                                                        activityIndicator.startAnimating()
                                                        view.addSubview(activityIndicator)
                                                        
                                                            

Using in a view controller

                                                        
                                                        
                                                            class LoadingViewController: UIViewController {
                                                            private let loadingIndicator: UIActivityIndicatorView = {
                                                                let indicator = UIActivityIndicatorView(style: .medium)
                                                                indicator.translatesAutoresizingMaskIntoConstraints = false
                                                                return indicator
                                                            }()
                                                            
                                                            override func viewDidLoad() {
                                                                super.viewDidLoad()
                                                                
                                                                DesignSystem.shared.styles.loadingIndicator(loadingIndicator)
                                                                
                                                                view.addSubview(loadingIndicator)
                                                                NSLayoutConstraint.activate([
                                                                    loadingIndicator.centerXAnchor.constraint(equalTo: view.centerXAnchor),
                                                                    loadingIndicator.centerYAnchor.constraint(equalTo: view.centerYAnchor)
                                                                ])
                                                            }
                                                            
                                                            func showLoading() {
                                                                loadingIndicator.startAnimating()
                                                            }
                                                            
                                                            func hideLoading() {
                                                                loadingIndicator.stopAnimating()
                                                            }
                                                        }
                                                        
                                                            

Customization

Styling

Custom styling

You can create a custom style by composing with the default style:

                                                        
                                                        
                                                            let customLoadingStyle: Style<UIActivityIndicatorView> = 
                                                            DesignSystem.shared.styles.loadingIndicator <> { indicator in
                                                                indicator.color = Theme.colors.background.brand
                                                            }
                                                        
                                                            

Accessibility

This component is built with accessibility in mind. See the information below for supported behaviors and configuration options to ensure a fully accessible experience for all users.

Accessibility configuration

Best practices

• The UIActivityIndicatorView has built-in accessibility support; VoiceOver announces the loading state automatically when animating.
• Set a custom accessibilityLabel when additional context is needed.

                                                        
                                                        
                                                            let activityIndicator = UIActivityIndicatorView()
                                                        DesignSystem.shared.styles.loadingIndicator(activityIndicator)
                                                        activityIndicator.accessibilityLabel = "Loading content"
                                                        
                                                            

Dependencies

• External dependencies: None
• Internal dependencies: None

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

These tokens are accessed via the public DesignSystem.shared API.

See also

• ProgressIndicator - For showing determinate progress
• StateView - For displaying loading, error, and empty states