Search code examples
jquery-mobileepiserver

Change jQuery Mobile loading icon

I am trying to change the default loading icon for jQuery Mobile (v1.1.0) by overwriting the jquery mobile css setting using this css. This is one way to make it work, as I have understood from reading around. (how to change the default load ajax loader gif in jquery mobile)

ui-loader .ui-icon {
     background-image: url(images/ajax-loader-2.gif);
} 

.ui-icon-loading {  
     background-image: url(images/ajax-loader-2.gif);
     background-size: 42px 42px;
}

These changes are the only code changes made.

I've also tried to set the background to the image with no luck.

ui-loader .ui-icon {
     background: url(images/ajax-loader-2.gif);
} 

.ui-icon-loading {  
     background: url(images/ajax-loader-2.gif);
     background-size: 42px 42px;
}

I've placed the new loader in the same directory as the default loader. However, when I debug with firebug it states "Failed to load the given URL". I thought it could be some caching problem, but it shows a black circle - which means that at least some changes are being made. I also tried to not change any code, but to overwrite the ajax-loader.gif with the new file with no luck. This is an episerver solution.

Hope my problem is clear.

Regards

Solved:

There was a problem file rights when i copied it from local to a VM.

Solution

  • I found the problem.

    There was a problem with file rights when i copied it to a VM. Not jQuery related at all.