Docs

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.

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

Loading-text

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

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;
}
Top

Slotted Content

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

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