Add an activity indicator on a uiwebview Add an activity indicator on a uiwebview ios ios

Add an activity indicator on a uiwebview


Make a loading View:

@implementation yourViewController{;    UIView* loadingView;}

In your viewDidLoad:

loadingView = [[UIView alloc]initWithFrame:CGRectMake(100, 400, 80, 80)];loadingView.backgroundColor = [UIColor colorWithWhite:0. alpha:0.6];loadingView.layer.cornerRadius = 5;UIActivityIndicatorView *activityView=[[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhiteLarge];activityView.center = CGPointMake(loadingView.frame.size.width / 2.0, 35);[activityView startAnimating];activityView.tag = 100;[loadingView addSubview:activityView];UILabel* lblLoading = [[UILabel alloc]initWithFrame:CGRectMake(0, 48, 80, 30)];lblLoading.text = @"Loading...";lblLoading.textColor = [UIColor whiteColor];lblLoading.font = [UIFont fontWithName:lblLoading.font.fontName size:15];lblLoading.textAlignment = NSTextAlignmentCenter;[loadingView addSubview:lblLoading];[self.view addSubview:loadingView];

This view will look like this:

enter image description here

Be careful, if you want to use the cornerRadius, you have to import <QuartzCore/QuartzCore.h> framework, and of corse before import, add QuartzCore framework to your project !

Detect when webview stop loading:

- (void)webViewDidFinishLoad:(UIWebView *)webView {    [loadingView setHidden:YES];}

you have to implement UIWebViewDelegate protocol, and

webView.delegate = self;

and make it visible:

- (void)webViewDidStartLoad:(UIWebView *)webView { [loadingView setHidden:NO];}


How do I make the activity indicator stop only when the web page appears?

Your object can become delegate for webView to listen to -webViewDidFinishLoad delegate method. So:

- (void)viewDidLoad {    // Create the UIWebView    UIWebView *webView = [[UIWebView alloc] initWithFrame:self.view.bounds];    webView.delegate = self; // Here is the key    ...}...- (void)webViewDidFinishLoad:(UIWebView *)webView {    [self.view viewWithTag:100].hidden = YES;}

You may also implement -webViewDidStartLoad: to show activity indicator instead of showing it in -viewDidLoad method.

How do I add words to the activity indicator like "Loading"?

You should create a separate UILabel, there is no way to add text to standard UIActivityIndicatorView


enter image description here

If you are looking for this on Swift, here it is:

var boxView = UIView()func webViewDidStartLoad(webView_Pages: UIWebView) {    // Box config:    boxView = UIView(frame: CGRect(x: 115, y: 110, width: 80, height: 80))    boxView.backgroundColor = UIColor.blackColor()    boxView.alpha = 0.9    boxView.layer.cornerRadius = 10    // Spin config:    let activityView = UIActivityIndicatorView(activityIndicatorStyle: UIActivityIndicatorViewStyle.WhiteLarge)    activityView.frame = CGRect(x: 20, y: 12, width: 40, height: 40)    activityView.startAnimating()    // Text config:    let textLabel = UILabel(frame: CGRect(x: 0, y: 50, width: 80, height: 30))    textLabel.textColor = UIColor.whiteColor()    textLabel.textAlignment = .Center    textLabel.font = UIFont(name: textLabel.font.fontName, size: 13)    textLabel.text = "Loading..."    // Activate:    boxView.addSubview(activityView)    boxView.addSubview(textLabel)    view.addSubview(boxView)}func webViewDidFinishLoad(webView_Pages: UIWebView) {    // Removes it:    boxView.removeFromSuperview()}

Don't forget to call UIWebViewDelegate:

class ViewController: UIViewController, UIWebViewDelegate {

And set the delegate for the webView on the viewDidLoad:

webView.delegate = self