page loading icon from css not showing

Question

I have css file like this

    .mask {
        display: none;
    }

    #mask.loading {
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            z-index: 1000;
            background-image: url('/icon.gif')
            background-position: center;
            background-repeat: no-repeat;
        }
    table.loading {
            opacity: .5;
}

And I want to show icon until table loads so I'm calling it like

$('#tableDisplay,#mask').addClass('loading');
$('#tableDisplay,#mask').removeClass('loading');

And in my html I added as

<div id="mask"></div>
<table id="tableDisplay">
</table>

And when I load page I can see table opaque but I do not see icon and my icon file is in same dir as css file

Zak · Accepted Answer · 2017-04-17 23:44:32Z

2

With your use of:

background-image: url('/icon.gif')

The slash is telling it to look in the web-root for the icon ... Remove the slash or give the full path IE

background-image: url('icon.gif')

background-image: url('/your/path/to/css/icon.gif')

This should also be apparent when you look in your console and see the 404 for the icon, you'll see the directory that the CSS file is "trying" to find icon.gif in

edited Apr 17, 2017 at 23:44

answered Apr 17, 2017 at 23:39

Zak

7,5812 gold badges29 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Johannes · Accepted Answer · 2017-04-17 23:43:04Z

1

Your first CSS rule has a class selector but it should be an ID:

#mask {  /* instead of .mask */
    display: none;
}

And your icon URL contains a slash which shouldn't be there if the icon is in the same directory:

background-image: url('icon.gif');

answered Apr 17, 2017 at 23:43

Johannes

67.9k22 gold badges84 silver badges139 bronze badges

Collectives™ on Stack Overflow

page loading icon from css not showing

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related