Tag Archives: UIActivityIndicatorView

How to display a "spinning wheel" indicator in the centre of your screen

Screen Shot 2013-12-31 at 15.58.02Sometimes you want to tell the user that something’s happening behind the scenes and that there’s no need to panic. While your process is happening you can display a “spinning gear” in the middle of your screen.

One way of doing this is via a UIActivityIndicatorView.

You can create them in Interface Builder, but it’s very easy to create one and show it if and when necessary. Here’s how:

- (UIActivityIndicatorView *)indicator {
    if (!_indicator) {
        _indicator = [[UIActivityIndicatorView alloc]initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhiteLarge];
    }
    return _indicator;
}

- (void)viewDidLoad
{
    [super viewDidLoad];

    self.indicator.center = self.view.center;
    [self.view addSubview:self.indicator];
}

This creates it in the centre of your UI, but it’s invisible until switched on like so:

// to start spinning
[self.indicator startAnimating];

// and to stop it again
[self.indicator stopAnimating];

The UIActivityIndicatorView has a property that automatically hides it when stopped, so all we have to worry about is starting and stopping it when necessary.





How to add the “spinning wheel” Activity Indicator to a web view

It’s always good to have something happening while you’re loading a UIWebView. You can use the UIActivityIndicator for this. It’s basically an animated GIF file that you can connect to your code like many other elements. To make it work we need to conform to the UIWebViewDelegate protocol and then query our web view to see if he’s finished loading.

Here’s how we do that:

  • add the protocol to your header file
  • make sure you drag from your Web View to your View Controller’s delegate (control drag to the orange oval in your storyboard, at the bottom of your view controller)
  • add the method webViewDidFinishLoad:(UIWebView *)myWebView
  • in it call the stopAnimating method for your spinning wheel.

In the storyboard make sure that you set the behaviour of the Activity Indicator to “animating” and “hides when stopped”.

Here are my files:

This content is for members only.