Q: Gif is not animated in pre boostrap angular2 I follow this article (https://www.bennadel.com/blog/3105-creating-a-pre-bootstrap-loading-screen-in-angular-2-rc-1.htm) to do a pre bootstrap my angular app.
I put a spinner gif on it, but the gif is not animated during the loading.
Someone has an idea?
<!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>


A: I find the answer! The Angular's loading screen don't animate gifs I don't know why maybe because there is no time to load the gif fully.
But It's possible to make a spinner in css and that's the solution.
There is a good spinners here : http://tobiasahlin.com/spinkit/ or https://projects.lukehaas.me/css-loaders/
Or the basic tutorial here : https://www.w3schools.com/howto/howto_css_loader.asp
