---
title: "ZingGrid Web Component: `<zg-load-mask>` | Docs"
description: "View our in depth tutorial covering the web component `<zg-load-mask>` tag and the associated features for the JavaScript grid."
url: https://www.zinggrid.com/docs/v1/api/tags/zg-load-mask
---

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/v1/api/tags/zg-load-mask.md
mode: provenance
representation: markdown
origin_response_id: 81582ad87f766a7c9eb19255a3d3841d
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.770Z
version_nonce: 10e109bbbd07d650edf15355ada50986
generated_at_utc: 2026-11-08T23:36:19.906Z
response_nonce: 4bc711fffa3b2a49bda7a1f02afce0eb
```

# `<zg-load-mask>`

Version 1

[Interactive Storybook Playground](https://storybook.zinggrid.com/?path=/docs/zg-load-mask--docs)

The `<zg-load-mask>` tag is a web component that controls the styling and display of the load mask of the grid. `<zg-load-mask>` is used to define the loading overlay that displays on top of the grid before the grid is completely rendered. You can style the `<zg-load-mask>` through CSS variables or the `zg-load-mask` CSS selector.

 ![Image of the DOM relationship for the zg-load-mask web component tag](https://storage.googleapis.com/zinggrid-pwa.appspot.com/components/zg-load-mask-web-component-dom.png "Image of the DOM relationship for the zg-load-mask web component tag")

| Component | Relationship | Type | Ancestor |
| --- | --- | --- | --- |
| [ZingGrid](https://www.zinggrid.com/docs/api/tags/zing-grid) | Parent | Generated, Manual | n/a |
| [ZGButton](https://www.zinggrid.com/docs/api/tags/zg-button) | Child | Manual | n/a |
| [ZGCheckbox](https://www.zinggrid.com/docs/api/tags/zg-checkbox) | Child | Manual | n/a |
| [ZGIcon](https://www.zinggrid.com/docs/api/tags/zg-icon) | Child | Manual | n/a |
| [ZGInput](https://www.zinggrid.com/docs/api/tags/zg-input) | Child | Manual | n/a |
| [ZGSelect](https://www.zinggrid.com/docs/api/tags/zg-select) | Child | Manual | n/a |
| [ZGText](https://www.zinggrid.com/docs/api/tags/zg-text) | Child | Manual | n/a |

#### Related Web Components

- [`<zing-grid>`](https://www.zinggrid.com/docs/api/tags/zing-grid/)
- [`<zg-data>`](https://www.zinggrid.com/docs/api/tags/zg-data/)
- [`<zg-param>`](https://www.zinggrid.com/docs/api/tags/zg-param/)

## Usage

A `<zg-load-mask>` tag can be manually inserted inside the grid as slotted content or automatically inserted when the caption is enabled via the `src` attribute. The load mask is styleable via CSS variables or the `zg-load-mask` CSS selector.

The load mask inserted as slotted content will look like:

```html
<zing-grid src="https://cdn.zinggrid.com/datasets/user-roles.json">
  <zg-load-mask>Hello World Loading...</zg-load-mask>
</zing-grid>
```

The load mask when triggered by the `src` attribute will look like:

```html
<zing-grid src="https://cdn.zinggrid.com/datasets/user-roles.json"></zing-grid>
```

## Attributes

There are no attributes available for the `<zg-load-mask>` web component.

## CSS Variables
`<zg-load-mask>` can be styled with CSS variables, like so:

```css
:root {
  --zg-load-mask-color: red;
}
```

Below is a list of all the associated `--zg-load-mask` CSS variables. Check out the [full list of CSS variables](https://www.zinggrid.com/docs/api/css-variables/reference/) or our [Styling Basics guide](https://www.zinggrid.com/docs/getting-started/styling-basics/) to learn more about styling the grid.

| Name | Default | Description | Demo |
| --- | --- | --- | --- |
| `--zg-load-mask-color` | #fff | Sets the font color of the loading text | [Example code](https://app.zingsoft.com/demos/embed/YTE2VZ54) |

## CSS Selector

`<zg-load-mask>` can be styled by common CSS selectors, like so:

```css
zg-load-mask {
  background: red;
}
```

## Slots

`<zg-load-mask>` contains placeholders to allow adding markup inside the component.

```html
<zg-load-mask>Slotted Content</zg-load-mask>
```

Below is a list of all the associated ZGLoadMask slots. Check out the [full list of slots](https://www.zinggrid.com/docs/api/styling/css-shadow-parts).

| Name | Description |
| --- | --- |
| (default) | Loading mask content. |