Loading animation is not showing

[Shoji Kaburagi]

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.

[Kiril Nikolov]

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

[Shoji Kaburagi]

Yes, the black dialog box with "Loading..." message shows, but the animation within it is not showing. What am I doing wrong?

[Kiril Nikolov]

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

[Shoji Kaburagi]

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?

[Kiril Nikolov]

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

[Shoji Kaburagi]

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

[Kiril Nikolov]

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

[Shoji Kaburagi]

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>

[Kiril Nikolov]

Hello Shoji,

I am glad it worked!

If you have any further questions, do not hesitate to contact us.
 
Regards,
Kiril Nikolov
Telerik