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)
FREE all Swift Loading Animations

Immediately get access to commented code for these animations when you follow Advanced Swift.
The result is an animating activity indicator and darkened screen blur that can be used to inform a user that progress is occurring:
