---
title: "Loading Screen | Features"
description: "ZingGrid has a default loading screen that can be used as-is or customized as your own."
url: https://www.zinggrid.com/docs/features/loading-screen
---

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/features/loading-screen.md
mode: provenance
representation: markdown
origin_response_id: 9a3e746f172b9da239b3fd87454c2289
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.695Z
version_nonce: 0c2276ec42eccc6918174f1f98e30ab9
generated_at_utc: 2026-10-24T01:32:42.413Z
response_nonce: 0695711201a604fba099b6b8c162afb3
```

# Loading Screen

ZingGrid has a default loading screen that can be used as is or customized as your own.

## Default

You can use the default loading screen by simply loading any dataset.

> **Note:** While loading, there will be a `loading` attribute available on the grid which you can add yourself or let the library define. You can also define a height on the grid while it's loading which will make a much better visual experience.

```html
/* This will not apply once the grid has loaded */
zing-grid[loading] {
  height: 400px;
}
```

[Example code](https://app.zingsoft.com/demos/embed/2JM91G95)

## Loading Text
To adjust the text displayed on the loading screen, set the `loading-text` attribute on the top level `<ing-grid>` tag, like so:

```html
<zing-grid loading-text="Custom Loading Text...">...</zing-grid>
```

### Custom Text Loading Screen Grid
Here is a complete grid with a custom text loading screen:

[Example code](https://app.zingsoft.com/demos/embed/8HY873ZS)

> **Note:** Due to ZingGrid's fast loading time, you may need to click on "Reload Demo" several times to see the loading screen.

## Custom Styling

Create your own loading screen by styling `<zg-load-mask>`, like so:

```html
zg-load-mask {
  /* Custom Loading Animated Gif */
  background-image: url('https://storage.googleapis.com/zg-demos.appspot.com/starwars_loading.gif');
  background-position: center;
  background-repeat: repeat-x;
  background-size: contain;
  height: calc(100% - 65px);
  opacity: .95;
  top: 65px;
}
```

### Custom Loading Screen Grid
Here is a complete grid with a custom animated loading screen featuring everyone's favorite Wookie:

[Example code](https://app.zingsoft.com/demos/embed/11AFCSQV)

> **Note:** Due to ZingGrid's fast loading time, you may need to click on "Reload Demo" several times to see the loading screen.

## Slotted Content

You can also create your own loading screen by slotting content inside of `<zg-load-mask>`, like so:

```html
<zg-load-mask>
  <img src="https://bit.ly/2Tkvbtr" alt="Loading ...">
</zg-load-mask>
```

### Custom Slotted Loading Screen Grid
Here is a complete grid with a custom animated loading screen via slotted content, again featuring everyone's favorite Wookie:

[Example code](https://app.zingsoft.com/demos/embed/5L4ZMK04)

> **Note:** Due to ZingGrid's fast loading time, you may need to click on "Reload Demo" several times to see the loading screen.

## Related Resources
Here are some extra resources related to this feature to help with creating your grid:

* [API Elements List](https://www.zinggrid.com/docs/api/tags/zg-load-mask)
* [CSS Variables List](https://www.zinggrid.com/docs/api-css-variables)