Loading Screen

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

Default

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 its loading will be a much better visual experience.

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

Custom Styling

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

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

Related Resources

• API Elements
• CSS Variables