Available from v1.3.0

ProgressIndicator

ProgressIndicator is a themed subclass of UIProgressView for showing determinate progress on user-triggered actions, such as document uploads.

Platform availability: iOS 17.0+

When to use:

• Use ProgressIndicator when displaying determinate progress for user-initiated actions like file uploads, downloads, or multi-step processes.
• Consider LoadingIndicator when the progress duration is unknown or indeterminate.

It includes the following features:

• Default and inverted style variants.
• Automatic minimum height enforcement.
• Trait collection change callbacks.
• Design system color integration.

Import

                                                        
                                                        
                                                            import BackbaseDesignSystem
                                                        
                                                            

Visual reference

API reference

ProgressIndicator

Properties

Initializers

init(frame:)
Creates a ProgressIndicator with the default style.

init(frame:style:)

Creates a ProgressIndicator with the specified style.

ProgressIndicatorStyle

An enumeration defining the style options for the progress indicator.

Style colors

Usage

Basic usage

                                                        
                                                        
                                                            let progressIndicator = ProgressIndicator()
                                                        progressIndicator.progress = 0.5
                                                        
                                                        view.addSubview(progressIndicator)
                                                        
                                                            

With inverted style

                                                        
                                                        
                                                            let progressIndicator = ProgressIndicator(frame: .zero, style: .inverted)
                                                        progressIndicator.progress = 0.75
                                                        
                                                        view.addSubview(progressIndicator)
                                                        
                                                            

Animating progress

                                                        
                                                        
                                                            let progressIndicator = ProgressIndicator()
                                                        view.addSubview(progressIndicator)
                                                        
                                                        UIView.animate(withDuration: 0.3) {
                                                            progressIndicator.progress = 0.8
                                                        }
                                                        
                                                        progressIndicator.setProgress(1.0, animated: true)
                                                        
                                                            

File upload example

                                                        
                                                        
                                                            class UploadViewController: UIViewController {
                                                            private let progressIndicator = ProgressIndicator()
                                                            
                                                            override func viewDidLoad() {
                                                                super.viewDidLoad()
                                                                
                                                                progressIndicator.translatesAutoresizingMaskIntoConstraints = false
                                                                view.addSubview(progressIndicator)
                                                                
                                                                NSLayoutConstraint.activate([
                                                                    progressIndicator.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 16),
                                                                    progressIndicator.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -16),
                                                                    progressIndicator.centerYAnchor.constraint(equalTo: view.centerYAnchor)
                                                                ])
                                                            }
                                                            
                                                            func uploadFile(data: Data) {
                                                                progressIndicator.progress = 0
                                                                
                                                                uploadService.upload(data: data) { [weak self] progress in
                                                                    DispatchQueue.main.async {
                                                                        self?.progressIndicator.setProgress(Float(progress), animated: true)
                                                                    }
                                                                } completion: { [weak self] result in
                                                                    DispatchQueue.main.async {
                                                                        self?.progressIndicator.progress = 1.0
                                                                    }
                                                                }
                                                            }
                                                        }
                                                        
                                                            

Responding to trait changes

                                                        
                                                        
                                                            let progressIndicator = ProgressIndicator()
                                                        progressIndicator.onTraitCollectionDidChange = { previousTraitCollection in
                                                            print("Trait collection changed")
                                                        }
                                                        
                                                            

Customization

Styling

Custom colors

                                                        
                                                        
                                                            let progressIndicator = ProgressIndicator()
                                                        progressIndicator.progressTintColor = .systemGreen
                                                        progressIndicator.trackTintColor = .systemGray5
                                                        
                                                            

Minimum height

The progress indicator enforces a minimum height of 4 points by default.

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

• VoiceOver announces progress changes automatically.
• Set a custom accessibilityLabel to describe what the progress represents.

progressIndicator.accessibilityLabel = "Upload progress"

Dependencies

• External dependencies: None
• Internal dependencies: Theme.colors

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

• LoadingIndicator - For indeterminate loading states
• StateView - For displaying loading, error, and empty states