Loading Screen

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


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

While loading, there will be a loading attribute available on the grid. You can add this yourself or let the library define it. Defining a height on the grid while it's loading will be a much better visual experience.

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


Set the loading-text attribute on the top level zing-grid tag to adjust the text displayed while loading.

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

Custom Styling

Create your own loading screen by styling <zg-load-mask>!

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;

Slotted Content

You can also create your own loading screen by slotting content inside of <zg-load-mask>.

  <img src="https://bit.ly/2Tkvbtr" alt="Loading ...">