# Web组件如何监听页面加载进度

#### 问题现象

加载Web页面时，如何实时监听Web页面的加载进度并通过进度条展示出来？

#### 背景知识

*   onProgressChange：网页加载进度变化时触发该回调。
*   Progress：进度条组件，用于显示内容加载或操作处理等进度。

#### 解决方案

*   实现思路如下：
    1.  加载在线网页时需要在module.json5中配置ohos.permission.INTERNET网络访问权限。具体配置方式请参考：声明权限。
    2.  在Web控件里添加onProgressChange属性监听当前网页加载进度。
    3.  使用Progress组件展示当前加载进度。
*   完整示例参考如下：
    
    ```
    import { webview } from '@kit.ArkWeb';
    
    @Entry
    @Component
    struct Index {
      controller: webview.WebviewController = new webview.WebviewController();
      @State currentProgress: number = 0;
      private total: number = 100;
      @State webLoadingEnd: boolean = false;
    
      build() {
        Column() {
          Progress({ value: this.currentProgress, total: this.total })
            .visibility(this.webLoadingEnd ? Visibility.None : Visibility.Visible)
            .width('100%');
    
          Web({ src: 'www.example.com', controller: this.controller })
            .geolocationAccess(false)
            .fileAccess(false)
            .onProgressChange((event) => {
              if (event) {
                console.info(`newProgress: ${event.newProgress}`);
              }
              this.currentProgress = event.newProgress;
              if (event.newProgress === this.total) {
                this.webLoadingEnd = true;
                this.currentProgress = 0;
              } else {
                this.webLoadingEnd = false;
              }
            });
        };
      }
    }
    ```