Góc 2 tải hoạt ảnh đóng băng

Question

Tôi đã phát triển ứng dụng Angular 2 có kích thước khá nhỏ và mất một chút thời gian để tải (số vendor.js có dung lượng lớn khoảng 5 MB). Để làm cho thời gian một chút dễ chịu hơn cho người sử dụng tôi đã thay thế các tiêu chuẩn

<span class="loading">Loading...</span> 

với một hình ảnh động CSS (tải thanh) hoặc một hình ảnh động GIF (Tôi đã thử cả hai) trong cách:

<span class="loading"><img src="loading.gif" /><br/>Wait ...</span> 

hoặc

<span class="loading"><span class="circle-loader-with-css-animations"></span>Wait ...</span> 

Nhưng không hoạt động nào vì hoạt ảnh (CSS hoặc GIF) đóng băng trong khi tải trang và khi ứng dụng Góc tiếp tục sẵn sàng và được hiển thị. Do đó, kết quả là hoạt ảnh tải được tải xuống và sau đó ứng dụng = tình huống không tốt hơn trước ...

BTW: Javascript (ví dụ: setInterval) cũng không được thực hiện trong thời gian tải này. Tôi đã cố gắng bao gồm vendor.js với async và defer nhưng không thành công.

Bất kỳ ý tưởng nào?

Chỉnh sửa: có vẻ là sự cố Google Chrome - bằng cách sử dụng Firefox hoạt ảnh hoạt động trơn tru.

Answer 1

Tôi sử dụng trình tải trên trang web cá nhân của mình bằng CSS, chỉ cần nghĩ rằng tôi sẽ chia sẻ mã của tôi vì nó hoạt động cho tôi và dường như không có bất kỳ vấn đề nào với một codebase lớn. Rõ ràng bạn sẽ muốn điều chỉnh nó theo nhu cầu của bạn nếu điều này kết thúc làm việc cho bạn.

Trong HTML:

<div class="loader"></div> 

Trong CSS:

.loader { 
    border: 16px solid #f3f3f3; 
    border-radius: 50%; 
    border-top: 16px solid grey; 
    width: 70px; 
    height: 70px; 
    -webkit-animation: spin 1s linear infinite; 
    animation: spin 1s linear infinite; 
}