Displaying a loading indicator for UIWebView using UIActivityIndicatorView

Posted by Filip Ekberg on December 1 2010 8 Comments

More and more apps today uses only the native application as a shell around their web-based application to get their app into App Store. A drawback with doing this is that you might get really annoying load times and you have to decide where to put the “wait for the data”-scene.

In my opinion you have two alternatives

  • Either you load all data in the App Delegate and have the Default.png shown untill all data is downloaded
  • Or you can start the loading in the App Delegate and not wait for it to finish and display a loading indicator once the application finished loading.

I’ve evaluated both of these methods and find that the second one enhanced the feeling of the application, no one accepts to wait for 5 seconds before an application is somewhat interactive.

Therefore I’ll show how to add a Loading indicator using the UIActivityIndicatorView.

You need to declare the UIActivityIndicatorView in your header file so it is accessable from all delegate methods.

UIActivityIndicatorView *loadingIndicator;

Then you need to initiate a UIActivityIndicatorView like this:

loadingIndicator = [[UIActivityIndicatorView alloc] initWithFrame:CGRectMake(145, 190, 20,20)];
[loadingIndicator setActivityIndicatorViewStyle:UIActivityIndicatorViewStyleGray];
[loadingIndicator setHidesWhenStopped:YES];

The first line allocates the resources for a UIActivityIndicatorView and the initializes it and puts it in the center of the screen, this is in landscape mode.

After that we set the style to gray and tell it to dissapear when we stop the animation. You can choose between three different color-schemes for this indicator. Check the apple developer reference for more information about that.

Now you are ready to add the loading indicator to you web view like this:

[webView addSubview:loadingIndicator];

I take for granted that you have a web view that’s called webView and that it has webView.delegate = self;. So that you can use the delegate methods to start and stop the loading indicator animation.

Now we are at the final step of the journey to get a loading indicator to our web view in the -(void)webViewDidStartLoad:(UIWebView *)webView delegate method we add the following:

[loadingIndicator startAnimating];

This will start the spinning loader inside the Web View, now to remove it, go to your delegate method for -(void)webViewDidFinishLoad:(UIWebView *)webView and add the following:

[loadingIndicator stopAnimating];

And you are all set! Now you should have a loading animation that displays a spinning wheel as long as the data loads.

Vote on HN

8 Responses to Displaying a loading indicator for UIWebView using UIActivityIndicatorView

  1. BobbyNo Gravatar says:

    is there a sample code to this? I tried it out but seems like not working… ><''

  2. Filip EkbergNo Gravatar says:

    Hi Bobby,

    The code-snippets in the article should work, what problems are you experiencing?

  3. HimNo Gravatar says:

    Works perfectly. Minor Correction:
    - [loadingIndicator startAnimating] (u missed the ‘g’)
    - release the loadingIndicator

    Also I wanted to know if we can increase the size of the indicator somehow.

  4. Filip EkbergNo Gravatar says:

    Hi Him,

    Thanks for spotting that! Fixed the typo.

    I don’t have XCode available to test, but if I recall correctly, you can change the size of the loading indicator by modifying CGRectMake. The two second parameters are width and height, change the 20 to 40 and see if that increases the loading indicator.

  5. VladoNo Gravatar says:

    Hi Filip, thanks for tutorial. I have a question. Stupid one. I’m total beginner in iOS development and I, probably just like other total beginners that need tutorial like this, I can’t figure out where to initiate UIActivityIndicatorView. In which method? Damn, I’m not even sure that I know in which file… I have tried to initiate it in webViewDidStartLoad before I call startAnimating (I suppose this is not the right way) and it worked when I load app first time, but when I continue browsing it just ignores stopAnimating in webViewDidFinishLoad and won’t go off the screen. Thanks man.

  6. Filip EkbergNo Gravatar says:

    Hi Vlado,

    You create the UIActivityIndicatorView in the constructor. Then in webViewDidStartLoad you start the animation and in webViewDidFinishLoad you stop it. Now you can also do something like this:

    [loadingIndicator startAnimating];
    // Load lots of data...
    [loadingIndicator stopAnimating];

    I hope this helps!

  7. JoseNo Gravatar says:

    Excellent tutorial. straight to whats needed and the choices that it comes down to it. Thanks

  8. Martin LockettNo Gravatar says:

    A simple, clear and useful solution. Thanks for taking the time to share this. You might want to consider also implementing

    - (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error
    {
       [loadingIndicator stopAnimating];
       // add any required error reporting/ handling ...
    }

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>