Introduction

I wrote a post to show custom state view for the whole controller. You can display loading image gif, empty state, no connection or error state flexibly. Check screenshots below.

You can check that post here

But in some situation, we want to a simple loading indicator inside a small view only? How can we do that?

I show you how to do that today.

What to do

We will add loading indicator into the cover image view, color circles and size circle while loading.

Create UIView extension

extension UIView {
    static let loadingViewTag = 1938123987
    func showLoading(style: UIActivityIndicatorView.Style = .gray) {
        // code here
    }

    func stopLoading() {
        // code here 
    }
}

Add UIActivityIndicatorView

func showLoading(style: UIActivityIndicatorView.Style = .gray) {
    var loading = viewWithTag(UIImageView.loadingViewTag) as? UIActivityIndicatorView
    if loading == nil {
        loading = UIActivityIndicatorView(style: style)
    }

    loading?.translatesAutoresizingMaskIntoConstraints = false
    loading!.startAnimating()
    loading!.hidesWhenStopped = true
    loading?.tag = UIView.loadingViewTag
    addSubview(loading!)
  loading?.centerYAnchor.constraint(equalTo: centerYAnchor).isActive = true
    loading?.centerXAnchor.constraint(equalTo: centerXAnchor).isActive = true
}

We define a static tag with a random number 1938123987. You can type any number for you.

Remove UIActivityIndicatorView when stop loading

func stopLoading() {
    let loading = viewWithTag(UIView.loadingViewTag) as? UIActivityIndicatorView
    loading?.stopAnimating()
    loading?.removeFromSuperview()
}

How to use

imageView.showLoading()
colorView.stopLoading()

Easy enough?

Color

But if I want to change it color?

func showLoading(style: UIActivityIndicatorView.Style = .gray, color: UIColor? = nil) {
  // ___
    if loading == nil {
        loading = UIActivityIndicatorView(style: style)
    }
  if let color = color {
        loading?.color = color
    }
    // ___
}

imageView.showLoading(color: .blue)

Scale

Coooool... One more thing, I want to make it bigger or smaller?

func showLoading(style: UIActivityIndicatorView.Style = .gray, color: UIColor? = nil, scale: CGFloat = 1) {
  // ___
  if let color = color {
        loading?.color = color
    }
    loading?.scale(value: scale)
    // ___
}

colorView.showLoading(scale: 0.75)

You can download the full code at my github

Conclusion

This tip is a small, but can help in some situations. Please share me how you use it in comments.

And share me how you show loading in your apps also.

Keep learning. Enjoy coding.