6
: - 非常に遅くなるロードするために2秒モジュールの読み込み中に読み込み中のアニメーションを表示しますか?私はそうのような<code>/profile</code>にロードされた私のプロファイルモジュールは怠け者持っている私のメインルートで
{
path: '',
component: HomeComponent
},
{
path: 'profile', loadChildren: './profile/profile.module#ProfileModule'
},
{
path: '**',
redirectTo: '',
pathMatch: 'full'
}
はしかし、私のプロファイルモジュールは、〜1.5になります。モジュールが読み込まれている間に何らかのアニメーションを表示したいのですが、どうしてですか?私はこれをやってみました:
app.component.html
<!-- other stuff ... -->
<router-outlet></router-outlet>
<div class="loading">
<div class="spinner">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
</div>
を、私のCSSの内側に、私が持っていた:
/* default .loading styles, .loading should be invisible, opacity: 0, z-index: -1 */
.loading {
opacity: 0;
transition: opacity .8s ease-in-out;
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: #1B1B1B;
color: white;
z-index: -1;
}
/* .loading screen is visible when app is not bootstraped yet, .my-app is empty */
router-outlet:empty + .loading,
router-outlet:empty + .spinner {
opacity: 1;
z-index: 100;
}
/* spinner animation css stuff */
をしかし、これは動作するようには思えない、とにかくありangular2モジュールがロードされている間にいくつかのローダーを表示するには?
が答えを感謝し、しかし、私は '.loader'を使用して作業の負荷の任意の並べ替えを取得し、' –
@SyntacticFructoseを.spinner'ことができませんでした、私は私の答えを更新しましたが、一般的にまずアニメーションが機能していることを確認してから、それをルータのものと統合しようとする必要があります – Milad