Angular loading spinner

[Musashi]

How do you show a loading spinner? I see loading spinners on all the demo angular components, but no documentation.

[Veselin Tsvetanov]

Hi Musashi,

In case you are developing an AngularJS application with Kendo UI jQuery widgets, you could use the kendo.ui.progress to indicate ongoing task (loading indicator) on the page.

In case you are developing an Angular 2+ application, the suite offers you a loader styling element:

<span class="k-i-loading k-icon" style="font-size: 64px;">

Keep in mind, that the loading indicator on the documentation examples is a custom one. The available k-i-loading loader could be seen in the following Plunker sample.

Regards,
Veselin Tsvetanov
Progress Telerik

[Yuriy]

Hi,

I couldn't find Kendo UI for Angular 2 specific forum, so I'll just ask here. Can you provide an example how to use Loading Indicator

<span class="k-icon k-i-loading"></span>

with Kendo Grid for Angular? I want to show it during grid data bind and dataStateChange event (page, sort and filter) as I re-bind Grid data source from the server api, not "slice and dice" on the client. I found a hint of "IsLoading" state on Custom Directive page, but nothing specific. Please assist.

Thank you,

-Yuriy

[Svet]

Hi Yuriy,

Please check the following sample plunker demonstrating the desired behavior:

http://plnkr.co/edit/UpjTnjyWOB3VBUZtLxnd?p=preview
 
I hope this helps. Please let me know in case I can provide any further assistance for this case.

Regards,
Svetlin
Progress Telerik

[Yuriy]

Hi Svetlin,

Thanks you quick turn around on it. Works fine. I saw similar on approach on StackOverflow. I guess, I was expecting more "out-of-the-box" solution.

Cheers,

-Yuriy