我正在尝试显示动画gif或使用css显示加载电感直到app加载,我的解决方案在chrome和Firefox上工作正常,如果ployfills启用IE挂起并且指示器将冻结直到加载完成,此问题的任何建议或解决方案?
使用angular cli创建的新应用 1. ng新appname 2.将以下css添加到style.css
pollyfills.ts un-commented
/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-j
.splash-logo {
left: 50%;
top: 50%;
margin-left: -26px;
margin-top: -30px;
z-index: 2;
position: absolute;
width: 54px;
}
.splash-loader,
.splash-loader::before,
.splash-loader::after {
left: 50%;
top: 50%;
margin-left: -45px;
margin-top: -45px;
position: absolute;
vertical-align: middle;
background: #006fff ;
width: 90px;
height: 90px;
border-radius: 50%;
z-index: 1;
}
.splash-loader::before {
content: "";
animation: bounce 1.5s infinite;
}
.splash-loader::after {
content: "";
animation: bounce 1.5s -0.4s infinite;
}
@keyframes bounce {
0% {
transform: scale(0.8);
-webkit-transform: scale(0.8);
opacity: 1;
}
100% {
transform: scale(2);
-webkit-transform: scale(2);
opacity: 0;
}
}
@-webkit-keyframes bounce {
0% {
transform: scale(0.8);
-webkit-transform: scale(0.8);
opacity: 1;
}
100% {
transform: scale(2);
-webkit-transform: scale(2);
opacity: 0;
}
}
.splash-screen {
background-color: #f3f3f3;
height: 100%;
}
index.html
<app-root>
<div class="splash-screen">
<div class="splash-loader"></div>
</div>
</app-root>