This is a migrated thread and some comments may be shown as answers.

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

1 Answer 229 Views
Application
This is a migrated thread and some comments may be shown as answers.
Brandon Peterson
Top achievements
Rank 2
Brandon Peterson asked on 19 Jul 2013, 11:24 PM
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>
  <h1>Loading...</h1>
</div>
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); }

1 Answer, 1 is accepted

Sort by
0
Kamen Bundev
Telerik team
answered on 22 Jul 2013, 12:15 PM
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;
}

Regards,
Kamen Bundev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Application
Asked by
Brandon Peterson
Top achievements
Rank 2
Answers by
Kamen Bundev
Telerik team
Share this question
or