Customize ajax loading image in jQuery mobile

In jQuery mobile v 1.0, to change defalt styling of ajax loading and search bar icon customize following default css.

Customize ajax loading image using css
.ui-loader .ui-icon {
background-color: transparent;

.ui-loader-default {
opacity: 1;

.ui-icon-loading {
background: url(YOUR URL) no-repeat;

Customize search bar icon using css
.ui-icon-search, .ui-icon-searchfield:after {
background-position: 0px 100%;

.ui-icon, .ui-icon-searchfield:after {
background: url(YOUR URL) no-repeat;
border-radius: 9px 9px 9px 9px;
background-size: 16px 16px;




Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.