Loading Screen

ZingGrid has a default loading screen that can be used as is or customized completely 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. 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.

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

Custom Styling

Create your own loading screen by styling <zg-load-mask>!
CloseCopy Copied
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;
}
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Slotted Content

You can also create your own loading screen by slotting content inside of <zg-load-mask>.
CloseCopy Copied
<zg-load-mask>
  <img src="https://bit.ly/2Tkvbtr" alt="Loading ...">
</zg-load-mask>
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Related Resources

loadingloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloading