How to make a progress bar for WKWebView

Progress bar is a nice way of showing users that our app is downloading content and things are progressing. The progress bar can be placed anywhere on the screen, but it is usually a thin line just under the navigation bar.

We can create a progress bar programmatically and set the constraints in viewDidLoad(). The bar needs an observer to keep track of the progress, so we can add it when we create the web view. Then we override the observeValue() to update the progress.

WKWebView is Key Value Observing (KVO) compliant on this property, which makes tracking the content downloading really easy with just a few lines of code.

Here we have a WebCoordinator taking the responsibility of the WKNavigationDelegate. It will command the WebViewController to show and hide the progress bar.