iOS实现微信网页进度条,WKWebview进度条的实现

实现微信网页进度条或者说就是webview的加载进度条的效果,主要代码如下:

一.第一步,添加观察者

[_webViewaddObserver:selfforKeyPath:@"estimatedProgress"options:NSKeyValueObservingOptionNewcontext:NULL];

    

    _progressView = [[UIProgressViewalloc] initWithFrame:CGRectMake(0,0, kScreenWidth,3)];

    _progressView.tintColor =kGlobalGoldColor;

    _progressView.trackTintColor = [UIColorwhiteColor];

二.实现

- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context {

    

    if ([keyPathisEqualToString:@"estimatedProgress"]) {

        

        if (object ==_webView) {

            [self.progressViewsetAlpha:1.0f];

            [self.progressViewsetProgress:self.webView.estimatedProgressanimated:YES];

            

            if(_webView.estimatedProgress >=1.0f) {

                

                [UIViewanimateWithDuration:0.3delay:0.3options:UIViewAnimationOptionCurveEaseOutanimations:^{

                    [self.progressViewsetAlpha:0.0f];

                } completion:^(BOOL finished) {

                    [self.progressViewsetProgress:0.0fanimated:NO];

                }];

                

            }

        }

        else

        {

            [superobserveValueForKeyPath:keyPathofObject:object change:changecontext:context];

        }

        

    }

}

三.移除观察者

- (void)dealloc

{

    [_webViewremoveObserver:selfforKeyPath:@"estimatedProgress"];

}

以上就可以实现微信网页进度条的效果,颜色,尺寸自行设计即可