feat: loading bar

package-lock.json

@@ -7072,6 +7072,11 @@
       "resolved": "https://registry.npmjs.org/ngx-contextmenu/-/ngx-contextmenu-4.1.1.tgz",
       "integrity": "sha512-XSmZxFUV1+sedMwRGvSvzZAAiOCuhb9jtzBNRjoVn5nDFx70IrjalIUiZUsWiDjj0TUMTNpAY8g9+glOdsjnCg=="
     },
+    "ngx-progressbar": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/ngx-progressbar/-/ngx-progressbar-2.1.1.tgz",
+      "integrity": "sha512-RyfW1Dhp9G+QZRhp0SsVZJOxvfXHq335aea9rAwVOORSzch6NFBuE+XYx3etlEh2avOYfigyWUX8vAlEXrHXKQ=="
+    },
     "no-case": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/no-case/-/no-case-2.3.2.tgz",

package.json

@@ -46,6 +46,7 @@
     "ng2-cookies": "^1.0.12",
     "ngx-bootstrap": "^1.6.6",
     "ngx-contextmenu": "^4.1.1",
+    "ngx-progressbar": "^2.1.1",
     "node": "^9.3.0",
     "npm": "^5.6.0",
     "npm-font-open-sans": "^1.1.0",

src/app/app.module.ts

@@ -46,6 +46,8 @@ import {UtcDatePipe} from './app.pipe';
 import {MonitorPageComponent} from './monitor-page/monitor-page.component';
 import {LinuxComponent} from './monitor-page/linux/linux.component';
 import {WindowsComponent} from './monitor-page/windows/windows.component';
+import {BrowserXhr} from '@angular/http';
+import {NgProgressModule, NgProgressBrowserXhr} from 'ngx-progressbar';
 
 @NgModule({
   imports: [
@@ -53,6 +55,7 @@ import {WindowsComponent} from './monitor-page/windows/windows.component';
     FormsModule,
     AppRoutingModule,
     HttpModule,
+    NgProgressModule
   ],
   declarations: [
     AppComponent,
@@ -87,6 +90,7 @@ import {WindowsComponent} from './monitor-page/windows/windows.component';
   bootstrap: [AppComponent],
   providers: [
     {provide: Options, useValue: {store: false, level: LoggerLevel.WARN}},
+    {provide: BrowserXhr, useClass: NgProgressBrowserXhr},
     Logger
   ]
 })

src/app/replay-page/replay-page.component.html

+<ng-progress></ng-progress>
 <app-json></app-json>

src/app/replay-page/replay-page.component.ts

@@ -38,6 +38,7 @@ export class ReplayPageComponent implements OnInit {
           Video.totalTime = Video.timelist[Video.timelist.length - 1] * 1000;
         },
         err => {
+          alert('无法下载');
           this._logger.error(err);
         },
       );