Docs

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.

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.

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

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:

<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:

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

Top

Custom Styling

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

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:

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

Top

Slotted Content

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

<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:

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

Top

Related Resources

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

[features: loading screen]