Skip to content

Repository files navigation

ShimmerView

A performant UIKit shimmer effect for text loading states. Adapted from the public domain ShimmerSwift library with bug fixes, modernized Swift concurrency support, and a cleaner API.

Installation

Add ShimmerView to your project via Swift Package Manager:

dependencies:[.package(url:"https://github.com/gtokman/ShimmerView.git", from:"1.0.0")]

Usage

Add a label (or any content) to the contentView, then set isShimmering = true. The shimmer sweeps across as a translucency mask — your text stays fully readable while a highlight glides through it.

Text with Auto Layout

import ShimmerView
letshimmer=ShimmerView()
shimmer.translatesAutoresizingMaskIntoConstraints =falseletlabel=UILabel()
label.text ="Thinking..."
label.textColor =.white
label.font =.systemFont(ofSize:16)
label.numberOfLines =0
label.translatesAutoresizingMaskIntoConstraints =false
shimmer.contentView.addSubview(label)NSLayoutConstraint.activate([
label.topAnchor.constraint(equalTo: shimmer.contentView.topAnchor),
label.leadingAnchor.constraint(equalTo: shimmer.contentView.leadingAnchor),
label.trailingAnchor.constraint(equalTo: shimmer.contentView.trailingAnchor),
label.bottomAnchor.constraint(equalTo: shimmer.contentView.bottomAnchor),])
shimmer.isShimmering =true

Multiline text

letshimmer=ShimmerView()
shimmer.translatesAutoresizingMaskIntoConstraints =falseletlabel=UILabel()
label.text ="Loading message content\nThis might take a moment\nPlease wait"
label.textColor =.white
label.font =.systemFont(ofSize:16)
label.numberOfLines =0
label.translatesAutoresizingMaskIntoConstraints =false
shimmer.contentView.addSubview(label)NSLayoutConstraint.activate([
label.topAnchor.constraint(equalTo: shimmer.contentView.topAnchor),
label.leadingAnchor.constraint(equalTo: shimmer.contentView.leadingAnchor),
label.trailingAnchor.constraint(equalTo: shimmer.contentView.trailingAnchor),
label.bottomAnchor.constraint(equalTo: shimmer.contentView.bottomAnchor),])
shimmer.isShimmering =true
// Stop when content loads
shimmer.isShimmering =false

Custom configuration

letshimmer=ShimmerView()
// Set individual properties
shimmer.shimmerSpeed =300
shimmer.shimmerDirection =.left
shimmer.shimmerAnimationOpacity =0.3
// Or replace the full configuration
varconfig=ShimmerConfiguration()
config.speed =300
config.direction =.left
config.animationOpacity =0.3
config.pauseDuration =0.6
shimmer.configuration = config

Configuration options

PropertyDefaultDescription
speed600Speed in points per second
direction.rightSweep direction (.right, .left, .up, .down)
highlightLength0.42Highlight band as a fraction of content size [0, 1]
pauseDuration0.49Pause between repetitions (seconds)
animationOpacity0.57Opacity of the dimmed region
baseOpacity1.0Opacity of the bright region
beginFadeDuration0.1Fade-in duration when shimmer starts
endFadeDuration0.3Fade-out duration when shimmer stops

Example App

The Example/ directory contains a demo app with interactive sliders for every configuration property. Generate the Xcode project with XcodeGen:

brew install xcodegen
xcodegen generate
open ShimmerViewExample.xcodeproj

Requirements

  • iOS 15+
  • Swift 6.0+

License

MIT

About

A performant UIKit shimmer effect for text loading states

Resources

Stars

4 stars

Watchers

0 watching

Forks

Releases

Packages

Used by

Contributors

Languages