Full-Screen iOS Loading Animation [Swift 5 Example]

This post shows how to implement a LoadingViewController and fade-in the LoadingViewController to show the app is performing some activity, like a network request.

Create A Loading View Controller

The first step is to subclass UIViewController and add a few placeholders. LoadingViewController will be implemented with a UIActivityIndicatorView to help inform the user progress is occurring, and a UIVisualEffectView to create a darkened blur.

class LoadingViewController: UIViewController {
    var loadingActivityIndicator: UIActivityIndicatorView = {
        // UIActivityIndicatorView Configuration
    }()
    
    var blurEffectView: UIVisualEffectView = {
        // UIVisualEffectView Configuration
    }()
    
    override func viewDidLoad() {
        // View Configuration
    }
}

Add A White Spinner

For this LoadingViewController, a large, white, and animating UIActivityIndicatorView will be used.

var loadingActivityIndicator: UIActivityIndicatorView = {
    let indicator = UIActivityIndicatorView()
    
    indicator.style = .large
    indicator.color = .white
        
    // The indicator should be animating when
    // the view appears.
    indicator.startAnimating()
        
    // Setting the autoresizing mask to flexible for all
    // directions will keep the indicator in the center
    // of the view and properly handle rotation.
    indicator.autoresizingMask = [
        .flexibleLeftMargin, .flexibleRightMargin,
        .flexibleTopMargin, .flexibleBottomMargin
    ]
        
    return indicator
}()

Add A Dark, Blurred Background

For this LoadingViewController, the UIVisualEffectView will be dark and partially transparent.

var blurEffectView: UIVisualEffectView = {
    let blurEffect = UIBlurEffect(style: .dark)
    let blurEffectView = UIVisualEffectView(effect: blurEffect)
    
    blurEffectView.alpha = 0.8
    
    // Setting the autoresizing mask to flexible for
    // width and height will ensure the blurEffectView
    // is the same size as its parent view.
    blurEffectView.autoresizingMask = [
        .flexibleWidth, .flexibleHeight
    ]
    
    return blurEffectView
}()

Override ViewDidLoad

To tie the components of LoadingViewController together, override viewDidLoad.

override func viewDidLoad() {
    super.viewDidLoad()
    
    view.backgroundColor = UIColor.black.withAlphaComponent(0.5)
    
    // Add the blurEffectView with the same
    // size as view
    blurEffectView.frame = self.view.bounds
    view.insertSubview(blurEffectView, at: 0)
    
    // Add the loadingActivityIndicator in the
    // center of view
    loadingActivityIndicator.center = CGPoint(
        x: view.bounds.midX,
        y: view.bounds.midY
    )
    view.addSubview(loadingActivityIndicator)
}

Loading View Controller With Fade In Animation

That’s it! To display LoadingViewController, use the following:

let loadingVC = LoadingViewController()

// Animate loadingVC over the existing views on screen
loadingVC.modalPresentationStyle = .overCurrentContext

// Animate loadingVC with a fade in animation
loadingVC.modalTransitionStyle = .crossDissolve
       
present(loadingVC, animated: true, completion: nil)

The result is an animating activity indicator and darkened screen blur that can be used to inform a user that progress is occurring:

Menu

Full-Screen iOS Loading Animation in Swift