Available from v7.0.0
BB.Shimmer
A loading animation effect that creates a moving light sweep across content to indicate loading states. The shimmer effect can be applied to the entire view or masked to a specific image shape.
Platform availability: iOS 17.0+
When to use:
- Use BB.Shimmer when creating skeleton loading placeholders that match the layout of incoming content.
- Consider BB.LoadingIndicator when a simple spinner is sufficient and skeleton placeholders are not needed.
Import
import SwiftUI
import BackbaseDesignSystem
Visual reference
Custom Shimmer View |
Plain Shimmer View |
API reference
BB.Shimmer
Initializers
init(image:)
Initializes a new shimmer instance.
|
Parameter |
Type |
Description |
|---|---|---|
|
image |
Image? |
Optional image to mask the shimmer effect. If nil, the shimmer fills the entire view. If provided, the shimmer follows the shape of the image |
Configuration
|
Property |
Type |
Default |
|---|---|---|
|
image |
Image? |
nil |
image
The image property specifies an optional image to mask the shimmer effect. When nil, the shimmer fills the entire view bounds. When an image is provided, the shimmer effect follows the shape of the image, making it suitable for avatar placeholders, logos, or icons.
BB.Shimmer(image: Image(systemName: "person.circle.fill"))
.frame(width: 80, height: 80)
Usage
Basic usage
Create a basic shimmer effect that fills the available space.
import SwiftUI
import BackbaseDesignSystem
struct ContentView: View {
var body: some View {
BB.Shimmer()
.frame(height: 20)
.cornerRadius(4)
}
}
Image-masked shimmer
Apply the shimmer effect masked to an image shape.
import SwiftUI
import BackbaseDesignSystem
struct ContentView: View {
var body: some View {
BB.Shimmer(image: Image(.appLogoWide))
.frame(width: 200, height: 100)
}
}
Loading state example
Use multiple shimmer views to create a loading skeleton.
import SwiftUI
import BackbaseDesignSystem
struct ContentView: View {
@State private var isLoading = true
var body: some View {
VStack {
if isLoading {
VStack(spacing: 16) {
BB.Shimmer()
.frame(height: 20)
.cornerRadius(4)
BB.Shimmer()
.frame(height: 16)
.cornerRadius(4)
BB.Shimmer()
.frame(height: 16)
.cornerRadius(4)
}
.padding()
} else {
VStack(spacing: 16) {
Text("Content Title")
.font(.headline)
Text("Content description goes here")
Text("Additional content information")
}
.padding()
}
}
.onAppear {
DispatchQueue.main.asyncAfter(deadline: .now() + 3) {
isLoading = false
}
}
}
}
Profile picture shimmer
Use a masked shimmer as a placeholder for profile images.
import SwiftUI
import BackbaseDesignSystem
struct ProfileView: View {
@State private var profileImage: UIImage?
var body: some View {
VStack {
if let profileImage = profileImage {
Image(uiImage: profileImage)
.resizable()
.scaledToFill()
.frame(width: 80, height: 80)
.clipShape(Circle())
} else {
BB.Shimmer(image: Image(systemName: "person.circle.fill"))
.frame(width: 80, height: 80)
}
}
}
}
List skeleton
Create a skeleton for a list of items.
import SwiftUI
import BackbaseDesignSystem
struct ListSkeletonView: View {
var body: some View {
VStack(spacing: 12) {
ForEach(0..<5, id: \.self) { _ in
HStack(spacing: 12) {
BB.Shimmer()
.frame(width: 48, height: 48)
.cornerRadius(24)
VStack(alignment: .leading, spacing: 8) {
BB.Shimmer()
.frame(height: 16)
.cornerRadius(4)
BB.Shimmer()
.frame(width: 150, height: 12)
.cornerRadius(4)
}
}
}
}
.padding()
}
}
States and variants
Full-width shimmer
The default state where the shimmer fills the entire view bounds.
Visual characteristics:
- Gradient animation sweeping across the view
- Rectangular shape by default
- Apply .cornerRadius() for rounded corners
BB.Shimmer()
.frame(height: 20)
.cornerRadius(4)
Image-masked shimmer
The state where the shimmer is masked to an image shape.
Visual characteristics:
- Gradient animation follows the image shape
- Suitable for avatars, logos, and icons
- Preserves transparency of the source image
BB.Shimmer(image: Image(systemName: "person.circle.fill"))
.frame(width: 80, height: 80)
Customization
Frame and corner radius
Customize the size and shape of the shimmer using standard SwiftUI modifiers.
BB.Shimmer()
.frame(width: 200, height: 16)
.cornerRadius(8)
Creating skeleton layouts
Combine multiple shimmer views to match your content layout.
VStack(alignment: .leading, spacing: 8) {
BB.Shimmer()
.frame(width: 200, height: 24)
.cornerRadius(4)
BB.Shimmer()
.frame(height: 16)
.cornerRadius(4)
BB.Shimmer()
.frame(width: 150, height: 16)
.cornerRadius(4)
}
Best practices
- Apply shimmer to placeholder content that matches the layout of the actual content.
- Use image-masked shimmers for specific shapes like avatars, logos, or icons.
- Keep shimmer animations brief; they should disappear once content is loaded.
- Use consistent shimmer styling throughout the app for a cohesive user experience.
- Ensure shimmer views have appropriate frame sizes to match the expected content dimensions.
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.Shimmer()
.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 |
|---|---|---|
|
Base color |
Theme.colors.background.subtle |
Base background color for the shimmer effect |
|
Highlight color |
Theme.colors.background.default |
Highlight color for the moving gradient |
|
Animation duration |
DesignSystem.shared.animation |
Animation timing for the shimmer sweep effect |
See also
- BB.LoadingIndicator - For indeterminate spinner loading states
- BB.ProgressIndicator - For determinate progress display
- BB.StateView - For error and empty states