Question

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

我需要在项目启动时使用Progress Spinner component，我正在搜索如何在项目启动时使用它，但我没有找到任何相关信息。我知道这是可能的，因为我看到很多项目使用了这个，this is an example。你能帮助我吗？非常感谢。

Answer 1

我发现使用SVG图形很容易实现这个：

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

主app上的

（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 Spinner在靴子上

2 个答案: