Question

我按照这篇文章（https://www.bennadel.com/blog/3105-creating-a-pre-bootstrap-loading-screen-in-angular-2-rc-1.htm）来做一个预启动我的角度应用程序。

我在其上放了一个旋转器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>

Answer 1

我找到了答案！ Angular的加载屏幕没有为GIF动画我不知道为什么可能因为没有时间完全加载gif。

但是可以在css中创建一个微调器，这就是解决方案。

这里有一个很好的微调器：http://tobiasahlin.com/spinkit/或https://projects.lukehaas.me/css-loaders/ 或者基本教程：https://www.w3schools.com/howto/howto_css_loader.asp

Gif在pre boostrap angular2中没有动画

1 个答案: