WKWebView加载进度条（仿微信）

WKWebView添加了estimatedProgress属性（double类型），我们可以利用该属性来设置UIProgressView

github代码仓库上存放的Demo

• 为页面添加UIProgressView属性

@property (nonatomic, strong) WKWebView *mywebView;
@property (nonatomic, strong) UIProgressView *progressView;//设置加载进度条

• 懒加载UIProgressView

-(UIProgressView *)progressView{
    if (!_progressView) {
        _progressView                   = [[UIProgressView alloc]
                                           initWithProgressViewStyle:UIProgressViewStyleDefault];
        _progressView.frame             = CGRectMake(0, 64, screen_width, 5);

        [_progressView setTrackTintColor:[UIColor colorWithRed:240.0/255
                                                         green:240.0/255
                                                          blue:240.0/255
                                                         alpha:1.0]];
        _progressView.progressTintColor = [UIColor greenColor];


    }
    return _progressView;
}

• 在初始化WKWebView时（我是在懒加载时） kvo 添加监控

 [_mywebView addObserver:self
                     forKeyPath:NSStringFromSelector(@selector(estimatedProgress))
                        options:0
                        context:nil];

• 页面开始加载时，隐藏进度条

//开始加载
-(void)webView:(WKWebView *)webView
  didStartProvisionalNavigation:(WKNavigation *)navigation{
    //开始加载的时候，让进度条显示
    self.progressView.hidden = NO;
}

• kvo 监听进度

//kvo 监听进度
-(void)observeValueForKeyPath:(NSString *)keyPath
                     ofObject:(id)object
                       change:(NSDictionary<NSKeyValueChangeKey,id> *)change
                      context:(void *)context{

    if ([keyPath isEqualToString:NSStringFromSelector(@selector(estimatedProgress))]
        && object == self.mywebView) {
        [self.progressView setAlpha:1.0f];
        BOOL animated = self.mywebView.estimatedProgress > self.progressView.progress;
        [self.progressView setProgress:self.mywebView.estimatedProgress
                              animated:animated];

        if (self.mywebView.estimatedProgress >= 1.0f) {
            [UIView animateWithDuration:0.3f
                                  delay:0.3f
                                options:UIViewAnimationOptionCurveEaseOut
                             animations:^{
                                 [self.progressView setAlpha:0.0f];
                             }
                             completion:^(BOOL finished) {
                                 [self.progressView setProgress:0.0f animated:NO];
                             }];
        }
    }else{
        [super observeValueForKeyPath:keyPath
                             ofObject:object
                               change:change
                              context:context];
    }
}

• 在dealloc方法里移除监听

-(void)dealloc{
    [self.mywebView removeObserver:self
                        forKeyPath:NSStringFromSelector(@selector(estimatedProgress))];
}