Kendo Mobile iOS Loader km-loader class changes for Q2 2013.2.716

2 posts, 1 answers
  1. Answer
    Brandon Peterson
    Brandon Peterson avatar
    50 posts
    Member since:
    May 2007

    Posted 19 Jul 2013 Link to this post

    The Kendo Mobile Q2  2013.2.716 release includes drastic changes to the km-loader for iOS. There is no longer the translucent, black rounded-corner box with a white spinner KendoUI font. Now the entire screen is slightly dimmed with a gray progress indicator and is not very visible when an app uses dark styles. The markup has also changed from previous versions.
    <div class="km-loader" data-role="loader" style="display: none;">
      <span class="km-loading km-spin"></span>
      <span class="km-loading-left"></span>
      <span class="km-loading-right"></span>
    Here are my style overrides for the new classes to display a white spinner and text. Is there a setting to do this otherwise or better yet use the previous loader styles in the new release?
    .km-ios .km-loading { background-color:#FFF }
    .km-ios .km-loader .km-loading-left { background-color:rgba(255,255,255,0.55) }
    .km-ios .km-loader .km-loading-right { background-color:rgba(255,255,255,0.2) }
    .km-ios .km-loader h1 { color:#FFF; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8); }
  2. Kamen Bundev
    Kamen Bundev avatar
    1532 posts

    Posted 22 Jul 2013 Link to this post

    Hello Brandon,

    Yes, we decided to drop the previous Loader look and go for entire CSS animation based one, that is more native-like - the font icon based version didn't look very good as fonts don't support partial translucency in the characters. We also wanted to make the loader look more like in native applications like iTunes and the AppStore. Check this jsBin for the complete CSS needed to change the loader color in all places (Loader, Pull to refresh and Press to load more). Meanwhile we'll try to come up with easier colorization for the next releases.

    Additionally you can style the .km-loader element to achieve look, similar to the old one, like this:
    .km-ios .km-loader {
        background: rgba(0,0,0,.8);
        width: 200px;
        height: 150px;
        top: 50%;
        left: 50%;
        margin: -75px 0 0 -100px;
        border-radius: 20px;

    Kamen Bundev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top