Gif在pre boost中不是動畫angular2

我按照這篇文章（https://www.bennadel.com/blog/3105-creating-a-pre-bootstrap-loading-screen-in-angular-2-rc-1.htm）做了一個pre bootstrap my angular app。Gif在pre boost中不是動畫angular2

我在它上面放了一個spinner gif，但gif在加載過程中沒有動畫。

有人有想法嗎？

<!DOCTYPE html> 
<html> 
<head> 
    <base href="/"> 
    <title>Title</title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
</head> 
<body> 

<my-app> 
    <style type="text/css"> 
     #pre-bootstrap { 
     background-color: white; 
     bottom: 0px; 
     left: 0px; 
     position: fixed; 
     right: 0px; 
     top: 0px; 
     z-index: 999999; 
    } 

    #pre-bootstrap div.messaging { 
     color: #FFFFFF; 
     font-family: monospace; 
     left: 0px; 
     margin-top: -37px; 
     position: absolute; 
     right: 0px; 
     text-align: center; 
     top: 50%; 
    } 

    #pre-bootstrap h1 { 
     font-size: 26px; 
     line-height: 35px; 
     margin: 0px 0px 20px 0px; 
    } 

    #pre-bootstrap p { 
     font-size: 18px; 
     line-height: 14px; 
     margin: 0px 0px 0px 0px; 
    } 
</style> 

<div id="pre-bootstrap"> 
    <div class="messaging"> 

     <h1>Foo</h1> 

     <p>Fooo</p> 

      <img src="../misc/images/ring-alt.gif" /> 

     </div> 
    </div> 
</my-app> 

</body> 
</html>

來源

2017-03-17 mickaelw

你能推到調試問題需要相關的代碼？ – Smit

我找到了答案！ Angular的加載屏幕不會生成gif動畫，我不知道爲什麼，因爲沒有時間來完全加載gif。

但是可以在css中創建一個spinner，這就是解決方案。

有一個很好的紡紗這裏：http://tobiasahlin.com/spinkit/或https://projects.lukehaas.me/css-loaders/ 或者基本教程這裏：https://www.w3schools.com/howto/howto_css_loader.asp

來源

2017-03-20 07:10:51 mickaelw

Gif在pre boost中不是動畫angular2

回答

相關問題