Loading animation is not showing

10 posts, 0 answers
  1. Shoji Kaburagi
    Shoji Kaburagi avatar
    27 posts
    Member since:
    Jul 2012

    Posted 09 Jul 2013 Link to this post

    Hello.

    I am trying to show loading popup when a user logs-in to the system. The popup shows up OK, but the circle animation does not show like the example does. How can I show it? My code is below:

    $("#loginButton").click(function ()
    {
    .....
     kendoMobileApplication.showLoading(); //show loading popup
    var url = "some url";
     $.post(url, { UserName: username, Password: password },
    function (result)
    {
    kendoMobileApplication.hideLoading(); //hide loading popup
    ...
    }
    Regards.
  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 09 Jul 2013 Link to this post

    Hello Shoji,

    You can use showLoading() or hideLoading() methods of the Kendo Application to show or hide the loading animation:

    <script>
       var app = new kendo.mobile.Application();
    </script>
    ...
    <script>
       app.showLoading();
       app.hideLoading();
    </script>

     

    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Shoji Kaburagi
    Shoji Kaburagi avatar
    27 posts
    Member since:
    Jul 2012

    Posted 09 Jul 2013 Link to this post

    Yes, the black dialog box with "Loading..." message shows, but the animation within it is not showing. What am I doing wrong?
  5. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 09 Jul 2013 Link to this post

    Hello Shoji,

    Please check if you have included all the required css files from the Kendo UI package, as this is the most possible reason for the mentioned behaviour. If the problem persist, please extract a JSBin/JSFiddle sample (with all the required files) that we can investigate. 

    Thank you in advance.
     
    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Shoji Kaburagi
    Shoji Kaburagi avatar
    27 posts
    Member since:
    Jul 2012

    Posted 09 Jul 2013 Link to this post

    Are these not sufficient references?
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <script src="/Scripts/KendoUI/jquery-1.7.1.js"></script>
          <script src="/Scripts/KendoUI/kendo.mobile.min.js"></script>
          <script src="/Scripts/KendoUI/shared/console.js"></script>
          <link href="/Content/KendoUI/kendo.common.min.css" rel="stylesheet" />
          <link href="/Content/KendoUI/kendo.mobile.all.min.css" rel="stylesheet"  />
    I put the images under /Content/KendoUI/images and I see the icon png files. What am I missing?
  7. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 10 Jul 2013 Link to this post

    Hi Shoji,

    The styling of the this pop-up is part of the kendo.mobile.all.min.css file. Make sure that you have it included in your project. Furthermore, please download the latest internal build of Kendo UI - 2013.1.703, by clicking on Manage Products while logged in on the website. I would also suggest to use a newer version of jQuery, as I can see you are using 1.7.1 in your project.

    For your convenience here is a jsBin example which demonstrates a the loading pop-up window.
     

    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Shoji Kaburagi
    Shoji Kaburagi avatar
    27 posts
    Member since:
    Jul 2012

    Posted 10 Jul 2013 Link to this post

    OK, I found the problem.

    We use IISExpress for web server instead of Visual Studio Development server. As soon as I switch to IISExpress the animation stops showing and then when I switch back to VS server it shows fine.

    We would like to use IISExpress for development if possible. Is there anyway?

    Thanks,
    Shoji
  9. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 11 Jul 2013 Link to this post

    Hello Shoji,

    You IIS server probably doesn't have the fonts used to display the loading pop-up. You need to make sure that you have the font files used on your IIS server as well. You can check how to configure the IIS on the following link:

    http://docs.kendoui.com/getting-started/mobile/icons#configure-iis

    I would also recommend to check out this stackoverflow thread, where you can find some useful information.
     
    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  10. Shoji Kaburagi
    Shoji Kaburagi avatar
    27 posts
    Member since:
    Jul 2012

    Posted 13 Jul 2013 Link to this post

    You are right. Adding the fonts below did the trick. Thanks for your help!

    <staticContent>
    <remove fileExtension=".ttf" />
    <mimeMap fileExtension=".ttf" mimeType="application/octet-stream" />
    <remove fileExtension=".woff" />
    <mimeMap fileExtension=".woff" mimeType="application/octet-stream" />
    </staticContent>
    </system.webServer>
  11. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 15 Jul 2013 Link to this post

    Hello Shoji,

    I am glad it worked!

    If you have any further questions, do not hesitate to contact us.
     
    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready