Loading Indicator

As of the R3 2020, Kendo UI for Angular delivers a new standalone Loader Component.

To render a loading indicator for your component while it loads, you can use either:

• The k-i-loading CSS class, or
• Custom logic which is based on the *ngIf directive and a loading mask. For a sample on how to apply the custom logic, refer to article on implementing a loading indicator in the Grid.

The following example demonstrates how to use the k-i-loading CSS class. You can adjust the size and color of the loading indicator in the same way you make adjustments to other icons.

<span class="k-icon k-i-loading"></span>
<span class="k-icon k-i-loading k-icon-xl"></span>
<span class="k-icon k-i-loading" style="color: limegreen;"></span>

Suggested Links

• Themes and Styling in Kendo UI for Angular
• Getting Started with Kendo UI for Angular
• Kendo UI Components for Angular