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 =情况不比以前好......

BTW:setInterval在此加载时间内也不执行Javascript(例如a ).我想包括vendor.js有async和defer,但没有成功.

有任何想法吗？

编辑:似乎是Google Chrome问题 - 使用Firefox动画可以顺利运行.

Answer 1

我在我的个人网站上使用 CSS 加载旋转器；只是认为我\xe2\x80\x99d 共享我的代码，因为它对我有用并且\xe2\x80\x99t 似乎对大型代码库有任何问题。显然，如果这最终对您有用，您\xe2\x80\x99将希望根据您的需要调整它。

\n\n

\r\n

\r\n

@keyframes spin {\r\n    to { transform: rotate(360deg); }\r\n}\r\n\r\n.loader {\r\n    border: 16px solid #f3f3f3;\r\n    border-radius: 50%;\r\n    border-top: 16px solid grey;\r\n    width: 70px;\r\n    height: 70px;\r\n    -webkit-animation: spin 1s linear infinite;\r\n    animation: spin 1s linear infinite;\r\n}

\r\n

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

\r\n

\r\n

\r\n

\n