# LoadingRenderer

> _Since v1.7.0_

Custom loading renderer function.
Returns an element or HTML string to display as the loading indicator.

Used with the `loadingRenderer` property in [`GridConfig`](/grid/api/core/interfaces/gridconfig.md) to replace
the default spinner with custom content.

```ts
type LoadingRenderer = (context: LoadingContext) => HTMLElement | string
```

#### Example

```typescript
// Simple text loading indicator
const textLoader: LoadingRenderer = () => {
  const el = document.createElement('div');
  el.textContent = 'Loading...';
  return el;
};

// Custom spinner with size awareness
const customSpinner: LoadingRenderer = (ctx) => {
  const spinner = document.createElement('my-spinner');
  spinner.size = ctx.size === 'large' ? 48 : 24;
  return spinner;
};

// Material Design-style progress bar
const progressBar: LoadingRenderer = () => {
  const container = document.createElement('div');
  container.className = 'progress-bar-container';
  container.innerHTML = '<div class="progress-bar"></div>';
  return container;
};

grid.gridConfig = {
  loadingRenderer: customSpinner,
};
```

## See Also

- [`LoadingContext`](/grid/api/core/interfaces/loadingcontext.md) for the context object passed to the renderer
- [`LoadingSize`](/grid/api/core/types/loadingsize.md) for size variants ('large' | 'small')