Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
A circular progress view. Essentially it is a circle broken up into segments much like the loading indicator on watchOS when installing and update. It's also IBDesignable to make your life easier.
// SegmentedCircularProgressView.swift
// Created by Matthew Cheetham on 18/06/2018.
import UIKit
/// A circular progress view broken out into individual segments. You can highlight individual segments to indicate progress in a clockwise fashion
class SegmentedCircularProgressView: UIView {
/// The number of segments to break the circle in to
@IBInspectable var totalSegments: Int = 8
/// The number of segments that should be highlighted the activeColour. To indicate progress
@IBInspectable var activeSegments: Int = 1
/// The colour to use the for the active segments
@IBInspectable var activeColour: UIColor = UIColor.white
/// The colour to use for the inactive segments
@IBInspectable var inactiveColour: UIColor = UIColor.white.withAlphaComponent(0.5)
/// The size of the gaps between the segments
@IBInspectable var gapSize: CGFloat = 0.004
/// The thickness of the line the makes up the circle
@IBInspectable var lineWidth: CGFloat = 10
override func draw(_ rect: CGRect) {
let circlePath = UIBezierPath(arcCenter: CGPoint(x: rect.width/2, y: rect.height/2), radius: (rect.width - lineWidth)/2, startAngle: -CGFloat.pi/2, endAngle: (3*CGFloat.pi)/2, clockwise: true)
let segmentAngle: CGFloat = (360 / CGFloat(totalSegments)) / 360
for i in 0 ... totalSegments-1 {
let circleLayer = CAShapeLayer()
circleLayer.path = circlePath.cgPath
circleLayer.strokeStart = segmentAngle * CGFloat(i)
circleLayer.strokeEnd = circleLayer.strokeStart + segmentAngle - gapSize
circleLayer.lineWidth = lineWidth
if i <= activeSegments-1 {
circleLayer.strokeColor = activeColour.cgColor
} else {
circleLayer.strokeColor = inactiveColour.cgColor
circleLayer.fillColor = UIColor.clear.cgColor
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.