Default Loading Screen

36 of 125

You can use the default loading screen by simply loading any dataset. We add AND remove the loading attribute once the dataset has loaded.

Please enable JavaScript to see the interactive demo.

https://app.zingsoft.com/demos/embed/2JM91G95

Result Full HTML CSS JS

Edit Download

Full Code

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingGrid Demo</title>
  <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  <style>
    zing-grid[loading] {
      height: 400px;
    }

    zing-grid[loading] {
      height: 400px;
    }
  </style>
</head>

<body class="zg-body">
  <zing-grid loading caption="Server Loading Screen" source="Grid is NEVER supposed to load. Demo to display loading text.">
  </zing-grid>
  <script>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
  </script>
</body>

</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ZingGrid Demo</title>
    <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  </head>
  <body class="zg-body">
    <zing-grid 
      loading
      caption="Server Loading Screen" 
      source="Grid is NEVER supposed to load. Demo to display loading text.">
    </zing-grid>
	</body>
</html>

zing-grid[loading] {
  height:400px;
}

// No JS code

Interested in this demo? Modify it to your needs in ZingSoft Studio, our testing sandbox. It's free to sign up, and you can come back and edit at any time!

Edit in Studio

Default Loading Screen

Full Code

Related Docs

Related Docs

Demo Gallery