features
Menu
Menu

Loading Screen

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

On This Page

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 fixed height will go away 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>!
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>.
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Related Resources

Join the Community

Support, extra demos, pre-releases and more

loadingloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloading