How can I make the loading animation be modal?

3 posts, 0 answers
  1. David
    David avatar
    13 posts
    Member since:
    Oct 2012

    Posted 18 Dec 2012 Link to this post

    We use the Application.showLoading() method to show the loading animation whenever we make any AJAX calls, or refresh any DataSources in our mobile web app. However, the page below the loading animation remains active while the animation is displayed. This can lead to very weird behaviour if the user touches anything there.

    How can I make the loading animation be modal?

    What I have tried is the following:
    <div id="glass" class="glass" style="display: none;"></div>
    with the following in our CSS:
    .glass {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 100;
        opacity: 0.3;
        background: #fff;
    and finally, the following utility function:
    function showLoading() {
    This works very well on:
    - Safari on iOS
    - Chrome on Android 4.2

    However, it displays an ugly white rectangle on:
    - Android Browser on Android 4.2 (see attached screen shot)

    I would happily throw away all of this code if there is a Kendo provided method to achieve what I want. If Kendo really does not provide this functionality, then any help in what I am doing wrong with my code would be greatly appreciated.

    Thanks in advance,
    David Sykes
  2. Petyo
    Petyo avatar
    2444 posts

    Posted 20 Dec 2012 Link to this post


    You may use the loader event capturing methods in order to prevent the user from clicking the app elements. However, this won't apply any sort of a visual overlay, and buttons will still be active (but they won't execute any actions). See this example for a reference implementation. 

    Hope this helps,
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. David
    David avatar
    13 posts
    Member since:
    Oct 2012

    Posted 07 Jan 2013 Link to this post

    Sorry for the delay in responding. Thanks for the answer. In the end I was able to get my "glass" working correctly. The solution was to change:
    position: absolute;
    position: fixed;
    We will go with this solution for now, and look into your one should we run into any problems later.

    Thanks again,
    David Sykes
Back to Top