Angular 4 gif加载不能在IE 11上运行

时间:2017-08-07 22:23:54

标签: angular internet-explorer-11

我正在尝试显示动画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>

0 个答案:

没有答案