Angular Material 2 启动时微调器

Question

我是 Angular 2 的新手。我使用 angular-cli 创建一个应用程序。

我需要使用Progress Spinner component on the startup of the project, I'm searching about how to use it on the boot of the project, but I don't find anything about it. I know that is possible because I see many projects that have used this, this is an example。你能帮助我吗？非常感谢。

Answer 1

我发现使用 SVG 图形很容易实现，并且：

<div id="loader"><img src="assets/img/loader-preview.svg" alt="loading"></div>

在主应用程序上（对我来说 index.html）：

<body>
<base href='/'>
<my-app>
    <div id="loader"><img src="assets/img/loader-preview.svg" alt="loading"></div>
</my-app>

Answer 2

你可以简单地使用这个

@Component({
    selector: 'spinner',
    template: `<div *ngIf="show">
                    <span><i class="fa fa-spinner fa-spin" [ngStyle]="{'font-size': size+'px'}" aria-hidden="true"></i></span>
               </div>
    `
})
export class SpinnerComponent {
    @Input() size: number = 50;
    @Input() show: boolean;

}

LIVE DEMO

Angular Material 2 启动时微调器

Angular Material 2 Spinner on boot

angular

angular-cli

angular-material2