How to implement loading spinner in Xcode

Question

I am new to Xcode. Can someone help me implement a loading spinner?

1) I need to run a loading spinner from the web page start to end of web page loading

2) Also, I need to display an error alert in the case that the website/Internet is down

import UIKit
import WebKit
class WebView : WKWebView {

/**
 Initialize the WKWebView.
 */
init(){
    let webConfig:WKWebViewConfiguration = WKWebViewConfiguration()
    super.init(frame:CGRectZero,configuration:webConfig)
    self.translatesAutoresizingMaskIntoConstraints = false
    self.allowsBackForwardNavigationGestures = true
    createHomePage()
}

/**
 Set the position for the WKWebView.
 */
func setPosition(view: UIView) {
    self.translatesAutoresizingMaskIntoConstraints = false;
    let height = NSLayoutConstraint(item: self, attribute: .Height, relatedBy: .Equal, toItem: view, attribute: .Height, multiplier: 1, constant: +0)
    let width = NSLayoutConstraint(item: self, attribute: .Width, relatedBy: .Equal, toItem: view, attribute: .Width, multiplier: 1, constant: 0)
    let top = NSLayoutConstraint(item:self,attribute: .Top, relatedBy: .Equal, toItem: view, attribute: .Top, multiplier: 1, constant: 30)
    view.addConstraints([height, width, top])

}

/**
 Set the url the webview should display.
 */
func setUrl(url:String!) {
    if url != nil {
        let url = NSURL(string:url)
        let request = NSURLRequest(URL:url!)
        self.loadRequest(request)
    }
}

/**
 Create the home page.
 */
func createHomePage() {
    let UUID = UIDevice.currentDevice().identifierForVendor?.UUIDString
    self.setUrl("https://mywebsite.com?deviceId="+UUID!)

}

}

//Another swift file

import UIKit
import WebKit

class ViewController: UIViewController{

var webView: WebView

required init(coder aDecoder: NSCoder) {
    self.webView = WebView()
    super.init(coder: aDecoder)!
}

override func viewDidLoad() {
    super.viewDidLoad()
    view.addSubview(webView)
    webView.setPosition(view)
    view.backgroundColor = (UIColor(red: 0, green: 150/255, blue: 136/255, alpha: 1));
}

override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
}

// MARK: Actions

}

Answer 1

In your storyboard file, add a UIActivityIndicator in the desired position on your Scene. Then, go to the UIActivityIndicator's attribute inspector and set the "Hides When Stopped Check" to"checked" or (true). Like so

Then, create an IBOutlet connecting the UIActivityIndicator to your ViewController.swift class. You do this by Ctrl+Click on the UIActivityIndicator and dragging the line to the ViewController.swift class. Notice the drag and drop picture below isn't connecting a UIActivityIndicator, but a UITextField. This is because I just found an image online as an example since I can't figure out how to take a Gyazo screenshot while Ctrl+Click Drag.

You then will get prompted with something like this

Just name it whatever you want, but for this example I am going to name it "activityIndicator". It will then write this code on the line you pointed to when linking the item.

From there, you want to use the lines

activityIndicator.startAnimating()

and

activityIndicator.stopAnimating()

in places where you want to start and stop the ActivityIndicator to animate indicating that the WebView is loading and when it is finished loading. Based off of the code you gave us, I believe you should change your ViewController.swift file to this :

import UIKit
import WebKit

class ViewController: UIViewController{

var webView: WebView
@IBOutlet var activityIndicator: UIActivityIndicatorView!

required init(coder aDecoder: NSCoder) { 
    //ViewController has been initialized and will be initializing WebView, so start animating the activityIndicator

    self.activityIndicator.startAnimating()
   

    self.webView = WebView()
    super.init(coder: aDecoder)!
}

override func viewDidLoad() {
    super.viewDidLoad()
    view.addSubview(webView)
    webView.setPosition(view)
    view.backgroundColor = (UIColor(red: 0, green: 150/255, blue: 136/255,     alpha: 1));

    //When the webView is added successfully to the subview, I believe that it has loaded correctly and the activityIndicator should stop animating.
    activityIndicator.stopAnimating()
}

override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
}

// MARK: Actions

}

As for the second question where you want to alert in case of an error, I have no experience with WebKit and I don't know. But, maybe someone else can help him out while I do some research and figure out an answer.

If this was too indepth, my bad. You said that you were new to writing code, and I was never taught how to link up elements in my storyboard files to my ViewControllers, so I hope this will help you if you ever were to encounter/have encountered that problem.