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：在此加载时间内也不执行Javascript（例如setInterval）。我尝试将vendor.js与async和defer包括在一起，但没有成功。

有什么想法吗？

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

Answer 1

我在个人网站上使用CSS加载微调器;我以为我会分享我的代码，因为它对我有用，并且似乎没有大代码库的任何问题。显然，如果最终为你工作，你会想要根据你的需要进行调整。

＆＃13;

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

＆＃13;

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

＆＃13;

Angular 2加载动画冻结

1 个答案: