# Vue Grid Loading Indicator

The Data Grid has a built in [Kendo UI for Vue Loader](https://www.telerik.com/kendo-vue-ui-develop/components/indicators/loader) component that displays a loading indicator over the grid's content while data is being fetched. This feature helps users understand that data is still being processed rather than assuming the grid is empty or unresponsive.

<CtaPanelOverview></CtaPanelOverview>

## Built-in Loading Indicator

To enable the built-in loading overlay, set the [`showLoader`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops#showloader) of the Grid to `true`.

The following example demonstrates how the built-in loader functions when data is being loaded:

[Demo Source](https://demos.telerik.com/kendo-vue-ui/grid/loading-indicator/basic/source.txt)

## Custom Loading Indicator

For more flexibility, the Kendo UI for Vue Data Grid also allows you to replace the default loader with a fully customizable loading indicator. This is particularly useful if you want to match the loading state with your application's design language or provide additional context while data is being retrieved.

To use a custom loading indicator, pass your custom component to the [`loader`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops#loader) prop.

You can see a sample implementation of a custom loading indicator for the Grid in the Demo below.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/grid/loading-indicator/custom/source.txt)

## Suggested Links

* [Vue Data Grid](https://www.telerik.com/kendo-vue-ui-develop/components/grid)
* [Data Query Overview](https://www.telerik.com/kendo-vue-ui-develop/components/dataquery)
* [API Reference of the Grid](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops)
* [API Index of the Grid](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api)