How To Create a Button With Loading Indicator in iOS

Learn how to create a button with a built-in spinner

Mobile apps UI with loading indicator button. Image by author.

One of the most crucial UI components in mobile development is the button. In mobile app design, we will essentially require a loading indication to improve user experience by ensuring that the user is aware that the state has changed or request is being processed.

Getting Started

In this article, we are going to learn how:

1. To create a custom UIButton class with a built-in loading indicator using UIActivityIndicatorView
2. To use the custom button in a view controller. In this example, we will be using storyboard.

Please take note that this project is developed in Swift 5 with iOS13+ and Xcode 13.4.

Below is the final output of the app that we are going to achieve from this tutorial.

Final output of this tutorial. Image by author.

1. Create New UIKit Project

Create new UIKit project

2. Create a Custom Button

Create a new file from “Cocoa Touch Class” template, then choose the Subclass as “UIButton” and name it “LoaderButton.”

Create new button subclass

Click “Next,” and add the below code to the file:

Below is the explanation of each important points added to this file:

1. Create a custom button by subclassing the UIButton.
2. Add an UIActivityIndicatorView as the loading indicator, namely as “spinner.”
3. Add an isLoading variable to keep the state of the button. Each time this variable is updated, it will immediately call the updateView() function.
4. Call the setupView() once the button is initialized.
5. The loading indicator will always hide when it is stopped animating.
6. Add the loading indicator as the button subview and set the constraint to the middle of the view.
7. The updateView() will keep the button state. If it is in the loading state, the title and image will be hidden (transparent) and the loading indicator is shown, and vice versa.

Great. Now, the main part is done. Let’s try to add it to the view controller.

3. Implement in View Controller

In this section, we will add the custom button to the storyboard and simply set the constraints.

1. Click the + button at the top right to choose the available controls from the Object Library.
2. Find the Button and drag it into the view controller.
3. Select the Identity Inspector tab at the top right, and change the Class to our LoaderButton we just created.

Add UIButton into view controller using Storyboard

4. Set the constraints with center vertically, horizontal padding to 32, and height equal to 54.

Setting constraints of the button

5. Now, we need to customize the button look a bit. Set the button title to “Demo Button,” change the background color to teal and the text color to white as shown in the image below:

Customize button looks

4. Connect Button to View Controller

1. Select storyboard, and open the Assistant Editor.
2. Connect the button to the code editor as an IBAction by holding the control key and dragging the button to the editor.
3. Select the Connection as Action, then change the Type to LoaderButton and enter the Name field as onClickedButton.

Connect button to view controller as an Action

5. Update Button Handler

Inside the onClickedButton, add the below code to simulate a request. The code will activate the spinner and wait for two seconds to finish. Once finished, the spinner will disappear and the button state will back to normal.

Project Completed

Congratulations. Now, we have completed this project and it is ready to run.

The complete source code can be downloaded from my GitHub repository.

Try to implement it into your projects and improve the code by adding more features to it.

Thanks for reading, and happy coding!

References

UIButton documentation

UIActivityIndicatorView documentation

Demo project GitHub repository