Angular loading spinner

5 posts, 0 answers
  1. Musashi
    Musashi avatar
    23 posts
    Member since:
    Jan 2014

    Posted 09 Jun 2017 Link to this post

    How do you show a loading spinner? I see loading spinners on all the demo angular components, but no documentation.
  2. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    795 posts

    Posted 13 Jun 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Yuriy
    Yuriy avatar
    10 posts
    Member since:
    Jul 2015

    Posted 07 Mar in reply to Veselin Tsvetanov Link to this post

    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

    &lt;span class="k-icon k-i-loading"&gt;&lt;/span&gt;

    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

  4. Svetlin
    Admin
    Svetlin avatar
    118 posts

    Posted 09 Mar Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Yuriy
    Yuriy avatar
    10 posts
    Member since:
    Jul 2015

    Posted 09 Mar in reply to Svetlin Link to this post

    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

     

Back to Top