Вы должны поместить спиннер внутрь элемента app-root.Он будет заменен приложением Angular после завершения загрузки приложения:
<body>
<app-root>
<!-- The spinner content goes here -->
</app-root>
</body>
Чтобы отобразить счетчик во время загрузки определенного вида, вы можете заключить его в компонент счетчика:
import { Component } from '@angular/core';
@Component({
selector: 'spinner',
template: `
<style>
...
</style>
<div id="nb-global-spinner" class="spinner">
...
</div>
`,
})
export class SpinnerComponent { }
и добавить его в соответствующий модуль:
...
import { HomeComponent } from './home.component';
import { SpinnerComponent } from './spinner.component';
@NgModule({
declarations: [
...
HomeComponent,
SpinnerComponent
],
...
})
export class MyModule { }
Вшаблон страницы назначения (например, home.component.html), вы можете использовать директиву ngIf ... else, чтобы отобразить компонент счетчика, пока страница все еще загружается:
<div *ngIf="isDataReady; else spinner">
<!-- Normal page template here -->
</div>
<ng-template #spinner>
<spinner></spinner>
</ng-template>
См. этот стек бликов для демонстрации.Спиннер воспроизводится во время загрузки данных домашней страницы.