> ## Content Index
> Fetch the complete content index at: https://williamboles.com/llms.txt
> Use this file to discover other available public pages before exploring further.

# Custom Loading View
- URL: https://williamboles.com/add-loading-view-to-your-application/
- Published: 2011-02-02T18:30:00.000Z
- Updated: 2026-09-26T09:10:57.000Z
- Description: Waiting for something to load is boring but we all have to do it from time to time. Here, we look at how to build a custom loading view that can be reused throughout your app.
- Author: William Boles
- Tags: UIKit

A common want in any application that communicates with a web service is to add a loading/loader view to show your user that the application is busy getting data and has not crashed. I've came up with a generic loading view that I use on multiple applications, its split into two methods, one to add the loading view and one to remove it.

```
-(void)startLoadingAnimationWithMessage:(NSString *)message tag:(NSUInteger)tag;
-(void)stopLoadingAnimationWithTag:(NSUInteger)tag;
```

In the above signatures we see that when creating a loading view we pass it a `NSString` object so that the loading view that be specific to the operation the application is performing e.g. "Requesting Data..." or "Logging in...".

In the example below, the methods could be used with either a category or inherited from a superclass.

Lets dig into the methods now:

```
-(void)startLoadingAnimationWithMessage:(NSString *)message tag:(NSUInteger)tag
{
    CGFloat activityIndicatorPadding = 15.0f;

    // new transparent view to disable user interaction during operation.  
    UIView *activityView = [[UIView alloc] initWithFrame: [[UIScreen mainScreen] bounds]]; 
    activityView.tag = tag;
    activityView.backgroundColor = [UIColor colorWithRed:(0.0/255.0) green:(59.0/255.0) blue:(102.0/255.0) alpha:1.0];
    activityView.alpha = 0.75;

    //Loader spinner  
    UIActivityIndicatorView *activityIndicator = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhiteLarge];  
    [activityView addSubview:activityIndicator]; 
    [activityIndicator release];

    UILabel *requestingInformation = [[UILabel alloc] init];
    requestingInformation.text = message;
    requestingInformation.backgroundColor = [UIColor clearColor];
    [activityView addSubview:requestingInformation];
    [requestingInformation release];

    CGSize requestingInformationSize = [requestingInformation.text sizeWithFont:requestingInformation.font constrainedToSize:CGSizeMake(9999, 9999) lineBreakMode:requestingInformation.lineBreakMode];	
    CGFloat totalWidthOfUIELements = (requestingInformationSize.width + activityIndicator.frame.size.width + activityIndicatorPadding);

    CGFloat activityIndicatorStartX = (self.view.frame.size.width - totalWidthOfUIELements)/2;

    activityIndicator.center = CGPointMake(activityIndicatorStartX,(self.view.frame.size.height/2)); 
    requestingInformation.frame = CGRectMake((activityIndicator.frame.origin.x + activityIndicator.frame.size.width + activityIndicatorPadding), (self.view.frame.size.height/2)-10, requestingInformationSize.width, requestingInformation.font.lineHeight);

    [self.view addSubview:activityView];  
    [self.view bringSubviewToFront:activityView]; 
    [activityView release];

    [activityIndicator startAnimating];  
}
```

So the loader view is made up of a `UIActivityIndicatorView - activityIndicator`, `UILabel - requestingInformation` and a backing view to hold all of the elements `UIView - activityView`.

So in the above we create `activityView`, set its frame to be that one of the iOS screen size, add a background colour and set that background semi-transparent. We also take advantage of the versatile `tag` property to uniquely identify that view.

We then move on to creating `activityIndicator`, here we initialise it with a style and add it to our `activityView` object, remembering to clean up after ourselves by releasing the object.

Next, we create our label, assign the `NSString` that we passed in and work out where in relation to the `activityIndicator` object it should appear in the UI based upon its width. We then set where the `activityIndicator` will appear by settings its frame.

Next we add `activityView` to our current view and ensure that it at the front.

Finally, we begin animating the UIActivityIndicatorView.

```
-(void)stopLoadingAnimationWithTag:(NSUInteger)tag
{
    UIView *activityView = [self.view viewWithTag:tag];

    for (UIView *subview in [activityView subviews]) {

          if ([subview isKindOfClass:[UIActivityIndicatorView class]]) {

             UIActivityIndicatorView *activityIndicator = (UIActivityIndicatorView *)subview;
             [activityIndicator stopAnimating];
             break;

        }        
    }

    [activityView removeFromSuperview];
}
```

Here, we remove the `activityView` from the current view and stop the `UIActivityIndicatorView` object's animation using the tag properties that we set.