Uiwebview with Progress Bar

UIWebView with Progress Bar

To have an accurate UIProgressView, you need to have some task that:

  • You can get information from while it isn't complete
  • Quantify its "completeness" as a percentage based on that information.

Now when you are loading your UIWebView, thats not possible. And Apple doesn't do it either. Apple often uses fake UIProgressViews to give you something to look at while the page is loading. Mail also uses fake progress views. Go try it out for yourself. This is how Apple's fake progress views work:

  • The progress view starts moving at a slow, constant rate
  • If the task finishes before the bar completes, it suddenly zips across the rest to 100% before disappearing
  • If the task takes a long time, the progress view will stop at 95% and will stay there until the task is complete.

To achieve this, you will have to animate the progressView manually. You could subclass it but that would probably be a bit advanced for you. The simplest way would be this:

In myViewController.h

@interface myViewController : UIViewController {
BOOL theBool;
//IBOutlet means you can place the progressView in Interface Builder and connect it to your code
IBOutlet UIProgressView* myProgressView;
NSTimer *myTimer;
}
@end

In myViewController.m

#import "myViewController.h"
@implementation myViewController
- (void)webViewDidStartLoad:(UIWebView *)webView{
myProgressView.progress = 0;
theBool = false;
//0.01667 is roughly 1/60, so it will update at 60 FPS
myTimer = [NSTimer scheduledTimerWithTimeInterval:0.01667 target:self selector:@selector(timerCallback) userInfo:nil repeats:YES];
}
- (void)webViewDidFinishLoad:(UIWebView *)webView{
theBool = true;
}
-(void)timerCallback {
if (theBool) {
if (myProgressView.progress >= 1) {
myProgressView.hidden = true;
[myTimer invalidate];
}
else {
myProgressView.progress += 0.1;
}
}
else {
myProgressView.progress += 0.05;
if (myProgressView.progress >= 0.95) {
myProgressView.progress = 0.95;
}
}
}
@end

Then, where your task gets completed, set theBool = true; and the progress view will take care of itself. Change the values in the if statement thing to control the speed of the animation.

Progressbar WebView in Swift

You can find a very good answer in this post. You can just add a progress bar as a subview to your webview. The main problem is the accuracy of the progress bar. The proposed answer is to begin by animating it constantly, block it at 95% when still loading and when your request is complete, zip it all the way to 100%.

Here's a solution in Swift:

Add these properties:

//Add this progress view via Interface Builder (IBOutlet) or programatically
let myProgressView: UIProgressView

var theBool: Bool
var myTimer: NSTimer

These functions will fill the progress view. You can play with the parameters:

func funcToCallWhenStartLoadingYourWebview() {
self.myProgressView.progress = 0.0
self.theBool = false
self.myTimer = NSTimer.scheduledTimerWithTimeInterval(0.01667, target: self, selector: "timerCallback", userInfo: nil, repeats: true)
}

func funcToCallCalledWhenUIWebViewFinishesLoading() {
self.theBool = true
}

func timerCallback() {
if self.theBool {
if self.myProgressView.progress >= 1 {
self.myProgressView.hidden = true
self.myTimer.invalidate()
} else {
self.myProgressView.progress += 0.1
}
} else {
self.myProgressView.progress += 0.05
if self.myProgressView.progress >= 0.95 {
self.myProgressView.progress = 0.95
}
}
}

Show progress bar until it load the data in UIWebView IOS7

You should start/stop the progressbar in webview delegate methods.

Add following line in your viewDidLoad.

webview.delegate = self;

Add following functions in your controller...

-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
//Start the progressbar..
return YES;
}

-(void)webViewDidFinishLoad:(UIWebView *)webView
{
//Stop or remove progressbar
}

-(void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error
{
//Stop or remove progressbar and show error
}


Related Topics



Leave a reply



Submit