Integration
You can integrate the Loader in another component or use it as a building block of a more complex functionality.
The Loader provides approaches for integration in the following components:
Loader in a Button
The following example demonstrates how to integrate the Loader in a button.
Loader in a Loading Panel
The following example demonstrates how to integrate the Loader as a building block in a loading panel.
Loader in Deferred Loading
Angular deferrable views provide a @loading sub-block that renders while the deferred content is being fetched. The Loader component is ideal for this role because it gives the user a clear visual signal that the application is actively loading content.
Combine the Loader with a Skeleton placeholder for the best user experience—the Skeleton appears instantly in the @placeholder block, and the Loader replaces it during the actual download in the @loading block.
The following example demonstrates the Loader inside a @loading block. Click Load Grid to trigger the deferred content—the Skeleton placeholder is visible initially, the Loader appears during download, and the Grid renders after loading completes. Click Reset to return to the placeholder state.
You can use the minimum parameter on @loading to keep the Loader visible for at least a specified duration. This prevents a brief flash when the deferred content loads quickly.
@loading (minimum 500) {
<kendo-loader type="infinite-spinner" themeColor="primary" size="large"></kendo-loader>
}