UI Throwback: Creating a Retro Progress Bar for iOS using CALayers

I love building UI components. It gives me a kind of aesthetic pleasure to see and use them after making a build. This also combines with my love for the MacOS/iOS ecosystem overall. Recently, I was tasked with creating a custom progress bar using . It’s not a big deal, but probably 99% of have made one from scratch at some point in their careers. In my case, I wanted to do a bit more than just create a couple of s with animations based on a value range from 0 to 1. I was aiming for a solution that would be suitable for many scenarios where a progress bar is needed. UIKit iOS developers CALayer I want to throw myself back to the days when UI components in the Apple world looked like this: Reflecting on the evolution of UI design, it’s been almost a decade since UI elements in the Apple world adopted a flat design with the introduction of iOS 7 in 2014. So, let’s indulge in nostalgia for the earlier versions of Mac OS and iOS and create a beautiful progress bar together. If you enjoy using but are still unsure about how to manipulate CALayers, this article will be useful for you. Here, we will go through typical layout, animation, and drawing challenges, providing insights and solutions to help you along the way. UIKit From UIView deep into CALayers API. The progress bar might seem straightforward, but if we dive deep into the details, you’ll understand that it requires a lot of sublayers. I’m not going to delve into it in detail here. You can check out this article where I briefly described what are and how they work: . CALayers CALayers https://hackernoon.com/rolling-numbers-animation-using-only-calayers So, let’s break it into small layers: General background Layer Mask layer (Animatable part) Progress background Layer Glare Layer Shimmering Layer The background layer has two additional child layers: Inner shadow Layer Border Gradient Layer Let’s structure it properly: RetroProgressBar [UIView] |--General background [CALayer] |--Inner Shadow [CALayer] |--Border Gradient [CALayer] |--Progress Background Layer [CALayer] |--Animated Mask Layer [CALayer] |--Glare [CALayer] |--Shimering [CALayer] Briefly, here’s how it should work: The Progress Bar should react to a value ranging from 0.0 to 1.0. When the value changes, we need to adjust the width of a layer based on this value: bounds.width * value Using this simple calculation, we can modify the width using . But before we do this, we need to understand which layers should change when the value changes. Let’s revisit the structure and identify the layers that need to be responsive to value changes. CATransaction RetroProgressBar [UIView] |--General background [CALayer] |--Inner Shadow [CALayer] |--Border Gradient [CALayer] |--Progress Background Layer [CALayer] |--Animated Mask Layer [CALayer] : [Animated Width] |--Glare [CALayer] : [Animated Width] |--Shimering [CALayer] : [Animated Width] It appears that we need to develop a protocol that can be adopted by the layers that need animated width based on value. ProgressAnimatable protocol In protocol, we need just two methods: change the layer’s width with animation and without. protocol ProgressAnimatable: CALayer { /// Sets the layer's width instantly to the specified value. func setToWidth(_ width: CGFloat) /// Animates the layer's width to the specified value. func animateToWidth(_ width: CGFloat, duration: TimeInterval, animationType: CAMediaTimingFunctionName, completion: (() -> Void)?) } Implementation: extension ProgressAnimatable { func setToWidth(_ width: CGFloat) { guard width >= 0 else { return } removeAllAnimations() CATransaction.begin() CATransaction.setDisableActions(true) self.bounds.size.width = width CATransaction.commit() } func animateToWidth(_ width: CGFloat, duration: TimeInterval, animationType: CAMediaTimingFunctionName = .easeInEaseOut, completion: (() -> Void)? = nil) { guard width >= 0, width != self.bounds.width else { completion?() return } let animation = CABasicAnimation(keyPath: "bounds.size.width") animation.fromValue = bounds.width animation.toValue = width animation.duration = duration animation.fillMode = .forwards animation.isRemovedOnCompletion = false animation.timingFunction = CAMediaTimingFunction(name: animationType) CATransaction.begin() CATransaction.setCompletionBlock { self.bounds.size.width = width completion?() } self.add(animation, forKey: "widthChange") CATransaction.commit() } } Both methods use . The first method might seem odd because we only need to change a value without animation. So, why is necessary? CATransaction CATransaction Try creating a basic and changing its width or height without any animation. When you run a build, you’ll notice the changes with an animation. How is this possible? In Core Animation, changes to layer properties (such as bounds, position, opacity, etc.) are typically animated based on the default action associated with that property. This default behavior is intended to provide smooth visual transitions without the need for explicit animations for every property change. CALayer CALayer This means that we need to explicitly disable actions in . By setting , you ensure that the layer's width is instantly updated to the new value without any intermediate animated transition. CALayer CATransaction.setDisableActions(true) The second method offers a flexible and reusable way to animate the width of any layer conforming to the protocol. It provides control over the animation's duration and pacing and includes an option for a completion action. This makes it well-suited for various animation needs within the UIKit framework. ProgressAnimatable Our candidates to conform to this protocol will be three layers: Animated Mask Layer, Glare Layer, and Shimmering Layer. Let’s go ahead and implement it. ProgressMaskLayer It’s time to conform to our protocol, and the most important layer in this setup will be our general . Why do we need this mask? Why can't it just be a with an animated width? As an , especially one focusing on front-end development, you often need to anticipate potential use cases for your components. In my instance, there is a Progress Background Layer. This isn't an animated , but what if it were animated with something like ? If you're concerned about performance, you'd likely consider that such a layer should be rendered once and then simply perform its animation. That's why this mask can be extremely useful. It allows for efficient rendering while still offering the flexibility needed for various animation scenarios. CAShapeLayer CALayer iOS Engineer CALayer CAReplicatorLayer final class ProgressMaskLayer: CAShapeLayer, ProgressAnimatable { override init() { super.init() backgroundColor = UIColor.black.cgColor anchorPoint = CGPoint(x: 0, y: 0.5) } override init(layer: Any) { super.init(layer: layer) } required init?(coder: NSCoder) { fatalError("init(coder:) has not been implemented") } } Let’s take a look at this line: anchorPoint = CGPoint(x: 0, y: 0.5) This line is crucial for our Progress Bar. By default, are centered, with the located at the center of the layer, not on the middle of the left edge as commonly assumed. The is the point around which all transformations of the layer occur. For a layer used as a progress bar, this setting typically means that when the layer's width changes, it expands equally in both directions from the . However, if we adjust the to the middle of the left edge, the layer will expand only to the right while the left edge remains fixed in place. This behavior is essential for a progress bar, ensuring that the growth of the bar appears from one side rather than both. CALayers anchorPoint anchorPoint anchorPoint anchorPoint private let progressMaskLayer = ProgressMaskLayer() private let progressBackgroundLayer = ProgressBackgroundLayer() public init() { super.init(frame: .zero) layer.addSublayer(progressMaskLayer) layer.addSublayer(progressBackgroundLayer) progressBackgroundLayer.mask = progressMaskLayer } In the snippet above, we initialize two main parts of the Progress Bar: and . Let’s take a look at the second one. ProgressMaskLayer ProgressBackgroundLayer final class ProgressBackgroundLayer: CAGradientLayer { override init() { super.init() locations = [0, 0.5, 1] } override init(layer: Any) { super.init(layer: layer) } required init?(coder: NSCoder) { fatalError("init(coder:) has not been implemented") } override func layoutSublayers() { super.layoutSublayers() colors = [ backgroundColor?.lightened(by: 0.3), backgroundColor, backgroundColor?.darkened(by: 0.5) ].compactMap({ $0 }) } } As you can see, it’s a featuring three colors. This implementation transforms an injected color into a vertical gradient, enhancing the visibility of the progress bar and giving it a more voluminous appearance. CAGradientLayer To make this possible, I prepared two methods in a extension. For fun, I chose not to convert back to , but to play solely within the realm of : CGColor CGColor UIColor CGColor extension CGColor { func darkened(by value: CGFloat) -> CGColor { guard let colorSpace = self.colorSpace, let components = self.components, colorSpace.model == .rgb, components.count >= 3 else { return self } let multiplier = 1 - min(max(value, 0), 1) let red = components[0] * multiplier let green = components[1] * multiplier let blue = components[2] * multiplier let alpha = components.count > 3 ? components[3] : 1.0 return CGColor( colorSpace: colorSpace, components: [red, green, blue, alpha] ) ?? self } func lightened(by value: CGFloat) -> CGColor { guard let colorSpace = self.colorSpace, let components = self.components, colorSpace.model == .rgb, components.count >= 3 else { return self } let red = min(components[0] + value, 1.0) let green = min(components[1] + value, 1.0) let blue = min(components[2] + value, 1.0) let alpha = components.count > 3 ? components[3] : 1.0 return CGColor( colorSpace: colorSpace, components: [red, green, blue, alpha] ) ?? self } } As you can see, it’s not too complicated. We just need to get , ( , , , and ), and . This means that based on the value, we can calculate a new color: either darker or lighter. colorSpace components red green blue alpha model Glare Layer Let’s move towards making our Progress Bar more 3D-ish. Now, we need to add another layer, which we’ll call Glare. It’s a straightforward implementation, but it should conform to the protocol. ProgressAnimatable final class ProgressGlareLayer: CALayer, ProgressAnimatable { override init() { super.init() backgroundColor = UIColor.white.withAlphaComponent(0.3).cgColor anchorPoint = CGPoint(x: 0, y: 0.5) } override init(layer: Any) { super.init(layer: layer) } required init?(coder: NSCoder) { fatalError("init(coder:) has not been implemented") } } To keep things simple, we only need the background color here to be white with an alpha of 0.3. Little Nice Shimmering (Shimmering Layer) I know some might say that MacOS X or iOS before version 6 didn’t have UI components with shimmering effects like this. But, as I said, this is like a movie inspired by a real story. This shimmering accentuates the 3D effect and makes it more visible. final class ShimmeringLayer: CAGradientLayer, ProgressAnimatable { let glowColor: UIColor = UIColor.white private func shimmerAnimation() -> CABasicAnimation { let animation = CABasicAnimation(keyPath: "locations") animation.fromValue = [-1.0, -0.5, 0.0] animation.toValue = [1.0, 1.5, 2.0] animation.duration = 1.5 animation.repeatCount = Float.infinity return animation } private func opacityAnimation() -> CABasicAnimation { let animation = CABasicAnimation(keyPath: "opacity") animation.fromValue = 1.0 animation.toValue = 0.0 animation.duration = 0.1 // Quick transition to transparent animation.beginTime = shimmerAnimation().duration animation.fillMode = .forwards animation.isRemovedOnCompletion = false return animation } private func animationGroup() -> CAAnimationGroup { let pauseDuration = 3.0 // Duration of pause between shimmering let shimmerAnimation = shimmerAnimation() let opacityAnimation = opacityAnimation() let animationGroup = CAAnimationGroup() animationGroup.animations = [shimmerAnimation, opacityAnimation] animationGroup.duration = shimmerAnimation.duration + pauseDuration animationGroup.repeatCount = Float.infinity return animationGroup } override init() { super.init() setupLayer() } override init(layer: Any) { super.init(layer: layer) } required init?(coder: NSCoder) { fatalError("init(coder:) has not been implemented") } override func layoutSublayers() { super.layoutSublayers() startAnimation() } private func setupLayer() { let lightColor = UIColor.white.withAlphaComponent(0.7).cgColor let darkColor = UIColor.white.withAlphaComponent(0).cgColor colors = [ darkColor, lightColor, darkColor ] anchorPoint = CGPoint(x: 0, y: 0.5) locations = [0.0, 0.5, 1.0] startPoint = CGPoint(x: 0.0, y: 0.5) endPoint = CGPoint(x: 1.0, y: 0.5) shadowColor = glowColor.cgColor shadowRadius = 5.0 shadowOpacity = 1 shadowOffset = .zero } private func startAnimation() { if animation(forKey: "shimmerEffect") == nil { let animationGroup = animationGroup() add(animationGroup, forKey: "shimmerEffect") } } } Here, we need two animations (Opacity and Location) combined into a . Also, using allows us to arrange a pause between animation sessions. This feature is quite useful because clients might want to control this property as well. CAAnimationGroup CAAnimationGroup As you can see in the picture, this adds more 3D effects, but it’s not quite enough. Let’s move forward. Background Layer We need to work with our static background layer, which lies beneath the animated Progress Line. If you recall, we have two additional sublayers there: the Inner Shadow and the Border Gradient. |--General background [CALayer] |--Inner Shadow [CALayer] |--Border Gradient [CALayer] I would say these two layers were quite popular in search queries several years ago, possibly due to UI trends. Let’s create our own versions and immortalize them in this article for future generations :) Inner Shadow Layer The class is designed to create a layer with an inner shadow effect, which can be a visually appealing way to add depth to UI elements. final class InnerShadowLayer: CAShapeLayer { override init() { super.init() masksToBounds = true shadowRadius = 3 shadowColor = UIColor.black.cgColor shadowOffset = CGSize(width: 0.0, height: 1.0) shadowOpacity = 0.5 } required init?(coder: NSCoder) { fatalError("init(coder:) has not been implemented") } override func layoutSublayers() { super.layoutSublayers() // Creates a path for the shadow that extends slightly outside the bounds of the layer. let shadowPath = UIBezierPath(roundedRect: bounds.insetBy(dx: -5, dy: -5), cornerRadius: cornerRadius) // Creates a cutout path that is the inverse of the layer's bounds. let cutoutPath = UIBezierPath(roundedRect: bounds, cornerRadius: cornerRadius).reversing() shadowPath.append(cutoutPath) self.shadowPath = shadowPath.cgPath } } We need a because we have to set . For that, we need to create a path for the shadow that extends slightly outside the bounds of the layer using from bounds. And then another — a cutout path that is the inverse of the layer’s bounds. CAShapeLayer shadowPath insetBy UIBezierPath In the illustration, it’s already almost there. But we need the last layer, which will bring us back to MacOS X Leopard. Border Gradient Layer It’s a subclass of designed to create a gradient border around a layer. It uses a as a mask to achieve the border effect. The is configured with a stroke color (initially black) and no fill color and is used as the mask for the . This setup allows the gradient to be visible only where the has a stroke, effectively creating a gradient border. CAGradientLayer CAShapeLayer shapeLayer BorderGradientLayer shapeLayer final class BorderGradientLayer: CAGradientLayer { let shapeLayer: CAShapeLayer = { let layer = CAShapeLayer() layer.strokeColor = UIColor.black.cgColor // Temporary color layer.fillColor = nil return layer }() init(borderWidth: CGFloat, colors: [UIColor]) { super.init() self.mask = shapeLayer self.colors = colors.map { $0.cgColor } self.setBorderWidth(borderWidth) } required init?(coder: NSCoder) { fatalError("init(coder:) has not been implemented") } override func layoutSublayers() { super.layoutSublayers() shapeLayer.path = UIBezierPath(roundedRect: bounds, cornerRadius: cornerRadius).cgPath } func setBorderWidth(_ borderWidth: CGFloat) { self.shapeLayer.lineWidth = borderWidth } } The initializer of accepts a and an array of s for the gradient. It sets up the gradient colors, applies the border width to the , and uses the as a mask to restrict the gradient to the border area. BorderGradientLayer borderWidth UIColor shapeLayer shapeLayer The method ensures that the path of is updated to match the layer's bounds and corner radius, making sure the border fits the layer correctly. The method allows dynamic adjustment of the border's width after initialization. layoutSublayers shapeLayer setBorderWidth Way better. Ok. Let’s stop making visual stuff, and let’s work on the logic. All together Now, it’s time to combine all these layers and let them into life. private lazy var backgroundLayer = BackgroundLayer( borderWidth: borderWidth, colors: borderColors ) private let glareLayer = ProgressGlareLayer() private let shimmeringLayer = ShimmeringLayer() private let progressMaskLayer = ProgressMaskLayer() private let progressBackgroundLayer = ProgressBackgroundLayer() public init() { super.init(frame: .zero) layer.backgroundColor = UIColor.white.cgColor layer.masksToBounds = true layer.addSublayer(progressMaskLayer) layer.addSublayer(progressBackgroundLayer) layer.insertSublayer(backgroundLayer, at: 0) progressBackgroundLayer.addSublayer(shimmeringLayer) progressBackgroundLayer.addSublayer(glareLayer) progressBackgroundLayer.mask = progressMaskLayer } Let’s take a look at how we going to deal with all layers which should change their width with animation: public func setValueWithAnimation(_ value: Double, duration: TimeInterval = 1.0, animationType: CAMediaTimingFunctionName = .easeInEaseOut, completion: (() -> Void)? = nil) { let newWidth = calculateProgressWidth(value) let animationGroup = DispatchGroup() animationGroup.enter() shimmeringLayer.animateToWidth( newWidth - WIDTH_ANIMATABLE_INSET, duration: duration, animationType: animationType, completion: animationGroup.leave ) animationGroup.enter() progressMaskLayer.animateToWidth( newWidth, duration: duration, animationType: animationType, completion: animationGroup.leave ) animationGroup.enter() glareLayer.animateToWidth( newWidth - WIDTH_ANIMATABLE_INSET, duration: duration, animationType: animationType, completion: animationGroup.leave ) animationGroup.notify(queue: .main) { completion?() } } First, we need to prepare a width from a value. The value should be less than 0 and greater than 1. Plus we need to take into consideration a possible border width. fileprivate func normalizeValue(_ value: Double) -> Double { max(min(value, 1), 0) } private func calculateProgressWidth(_ value: Double) -> CGFloat { let normalizedValue = normalizeValue(value) let width = bounds.width * normalizedValue - borderWidth return width } For the correct 3D effect, glare and shimmering layers should be with a little padding from the right and left sides: newWidth - WIDTH_ANIMATABLE_INSET And finally, the method uses an animation group ( ) to synchronize the animations of three layers: , , and . Each layer's width is animated to the calculated width (adjusted by for and to fit the design) over the specified duration and with the specified animation curve. DispatchGroup shimmeringLayer progressMaskLayer glareLayer WIDTH_ANIMATABLE_INSET shimmeringLayer glareLayer The animations are coordinated using the , ensuring that all animations start simultaneously and the completion closure is called only after all animations have finished. This method provides a visually appealing way to update the progress bar's value with a smooth, synchronized animation across its various decorative layers. DispatchGroup Source Code The latest version exists as a Swift Package and Pod. So you can grab it from here . Btw, contributions are welcome! Retro Progress Bar repository Usage Create an instance of RetroProgressBar. You can add it to your view hierarchy as you would with any UIView. let progressBar = RetroProgressBar() Customization: progressBar.progressColor = UIColor.systemBlue progressBar.cornerRadius = 5.0 progressBar.borderWidth = 2.0 progressBar.borderColors = [UIColor.white, UIColor.gray] To change value with animation: progressBar.setValueWithAnimation(0.75, duration: 1.0, animationType: .easeInEaseOut) { print("Animation Completed") } Without animation: progressBar.setValue(0.5) Final Thoughts Recreating this old-style progress bar has been a nostalgic dive into the aesthetics I deeply miss. Working with UIKit and reminded me of the versatility and power of our tools as developers. This project wasn't just about technical implementation; it was a journey back to a beloved design era, proving that we can still craft anything, including the timeless charm of older designs. CALayer This experience has been a poignant reminder that in , simplicity and nostalgia can coexist beautifully, bridging past and present. UI design Happy coding!