javascript - Angular 2加载动画卡住

Question

我开发了一个 Angular 2 应用程序，它有相当大的尺寸并且需要一些时间来加载(vendor.js 大约有 5 MB 大)。为了让用户的时间更愉快，我更换了标准

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

使用 CSS 动画(加载条)或 GIF 动画(我都试过了):

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

或

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

但这一切都不起作用，因为动画(CSS 或 GIF)在页面加载期间卡住，当它继续时，Angular 应用程序已准备就绪并显示。所以结果是一个卡住的加载动画，然后 app = 情况并不比以前好......

顺便说一句:在此加载期间，Javascript(例如 setInterval)也不会执行。我尝试将 vendor.js 包含在 async 和 defer 中，但没有成功。

有什么想法吗？

编辑:似乎是 Google Chrome 的问题 - 使用 Firefox 动画效果流畅。

Answer 1

我使用 CSS 在我的个人网站上使用加载微调器；只是想我会分享我的代码，因为它对我有用，而且似乎对大型代码库没有任何问题。显然，如果这最终适合您，您将希望根据您的需要进行调整。

@keyframes spin {
    to { transform: rotate(360deg); }
}

.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;
}

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