Change the Loading Image on SharePoint External List

Posted on by SharePointCSS.com

Change the External List Loading Gif

**So far this only works on Chrome =\

External lists pull content from an external data source and surface the items into SharePoint.  This allows you to easily work with the items using the SharePoint web/app part controls as you normally would with a standard SharePoint list.  The loading image that appears on an external list is a bit clunky, and dates back to SharePoint 2007– possibly earlier.

Here’s what that loading image looks like. 

I mean it works and does the trick to pacify users while content is loaded, but of course, I had other plans…I wanted to change it to something a little more industry-specific for my company.  Something like this:

So after looking around online, I was able to change the loading image (only in chrome so far) with a little CSS.

Want to change it?

Drop this code in:

div[style='padding-top:5px;']>center>img[src='/_layouts/15/images/gears_an.gif']{
    display:none;
}
div[style='padding-top:5px;']>center:before{
    display:block;
    content: " ";
    /* adjust height and width to fit your gif*/
    width: 70px;
    height: 70px;
    /* again, replace this url with the url of your .gif of choice */
    background-image:url('/_layouts/15/images/gears_anv4.gif');
    background-repeat:no-repeat;
}