Make a full-screen loading image for an AngularJS website

Question

I want to show a full-screen image before my AngularJS website is fully bootstrapped.

One way is to use ng-cloak.

This is an example to show a line of words.

I tried to make a full-screen image instead

[ng-cloak].splash {
    /* The image used */
    background-image: url("https://media.thetab.com/blogs.dir/13/files/2017/02/nice-guy-2.jpg");

    /* Full height */
    height: 100%; 

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

http://plnkr.co/edit/OTYwqGehVAsw5R8V?preview

But it did not work. Does anyone know why?

Answer 1

You missed display: block !important; in [ng-cloak].splash

[ng-cloak].splash {
    /* The image used */
    background-image: url("https://media.thetab.com/blogs.dir/13/files/2017/02/nice-guy-2.jpg");

    /* Full height */
    height: 100%; 

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: block !important;
}

http://plnkr.co/edit/oiGcMrO18nMt8KmM1d6X?preview&p=preview