Home/ Questions/Q 7675167
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T16:54:01+00:00

I am using jQueryMobile 1.1-rc1 and my pageloading indicator is not displaying correctly. I

  • 0

I am using jQueryMobile 1.1-rc1 and my pageloading indicator is not displaying correctly.

I originally made my theme when the themeroller first came out, and everything has been fine through the last few updates of jQM until the most recent.

Now the loading icon doesn’t spin and is no longer centered in the bubble.

Do you need to re-roll themes in themeroller when updating? I don’t see the option of selecting the target version in themeroller.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I took another look at this and the answer is that ThemeRoller for jQueryMobile is only compatible with 1.0.x release of jQM.

    Todd Parker Answered the question here in the jQueryMobile issue tracker.

    Tyler Benzinger Answered the question here in the Theme Roller issue tracker.

    It seems we will have to wait for Theme Roller to support version 1.1 themes.

    Update: Solution

    In your theme.css comment out or delete the .ui-icon-loading section and insert the following (from the 1.1-rc1 css)

    /* loading screen */
.ui-loading .ui-loader { display: block; }
.ui-loader { display: none; z-index: 9999999; position: fixed; top: 50%; box-shadow: 0 1px 1px -1px #fff; left: 50%; border:0; }
.ui-loader-default { background: none; opacity: .18; width: 46px; height: 46px; margin-left: -23px; margin-top: -23px; }
.ui-loader-verbose { width: 200px; opacity: .88; height: auto; margin-left: -110px; margin-top: -43px; padding: 10px; }
.ui-loader-default h1 { font-size: 0; width: 0; height: 0; overflow: hidden; }
.ui-loader-verbose h1 { font-size: 16px; margin: 0; text-align: center; }
.ui-loader .ui-icon { background-color: #000; display: block; margin: 0; width: 44px; height: 44px; padding: 1px; -webkit-border-radius: 36px; -moz-border-radiu$
.ui-loader-verbose .ui-icon { margin: 0 auto 10px; opacity: .75; }
.ui-loader-textonly { padding: 15px; margin-left: -115px;  }
.ui-loader-textonly .ui-icon { display: none; }
.ui-loader-fakefix { position: absolute; }

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

    Make sure you have the new ajax-loader.gif file in the theme images folder.

    • 0