Latest 0.1.5
License MIT
Platforms ios 10.3

CI Status



ConnectedDots is available through CocoaPods. To install
it, simply add the following line to your Podfile:

pod 'ConnectedDots'


You can create the view through code or InterfaceBuilder

To configure control from code use

//Total number of dots
dots.numberOfDots = 8

//Default fill color
dots.defaultColor = .blue

//Dot radius
dots.dotRadius = 20.0

//Width of line that connects dots
dots.connectorLineWidth = 6.0

//Whether to show number inside dot
dots.showText = true

//Dots number font
dots.textFont = UIFont.systemFont(ofSize: 20.0)

//Dots number text color
dots.textColor = .darkGray

//Filled dots text color
dots.filledDotTextColor = .white

//Change to start dot text from different number (*default is 0*)
dots.textStartingNumber = 0

//Change dot selection outline color and width
dots.selectionOutlineColor = .red
dots.selectionOutlineWidth = 2.0

//Change content insets 
dots.insets = UIEdgeInsets(top: 0, left: 20, bottom: 0, right: 10)

There are three options available for dots selection:

  • none – user can’t select dot by tapping on it

  • direct – user selects dot by tapping on it

  • progressive – works more like UIPageControl. Tapping from the right side selects next dot. Tapping from the left side selects the previous dot.

Default is direct. Change it from code:

dots.selectionType = .progressive

Use delegate if you want to limit selection of some dots

dots.delegate = self

func connectedDots(_ connectedDots: ConnectedDots, shouldSelectDotAt index: Int) -> Bool {
    return index % 2 == 0

To set dots fill color use following functions

//Apply fill color to dot at index
dots.setFillColor(.orange, forDotWithIndex: 1)

//Remove fill color for dot at index
dots.resetDotFillColor(atIndex: 1)

//Remove fill color for all dots

To select dot programmatically

//Select dot at index
dots.selectDot(atIndex: 6)

//Deselect dot

//Get selected dot index

To be notified about dot selection change use Value Changed event. Create connection to IBAction from Interface Builder or use:

dots.addTarget(self, action: #selector(self.dotsSelectionChanged(_:)), for: .valueChanged)


Artur Balabanskyy, [email protected]


ConnectedDots is available under the MIT license. See the LICENSE file for more info.

Latest podspec

    "name": "ConnectedDots",
    "version": "0.1.5",
    "summary": "Customizable page control with a progress",
    "description": "TODO: Add long description of the pod here.",
    "homepage": "",
    "license": {
        "type": "MIT",
        "file": "LICENSE"
    "authors": {
        "Artur Balabanskyy": "[email protected]"
    "source": {
        "git": "",
        "tag": "0.1.5"
    "platforms": {
        "ios": "10.3"
    "source_files": "ConnectedDots/Classes/**/*"

Pin It on Pinterest

Share This