Default Loading Screen

26 of 116
You can use the default loading screen by simply loading any dataset. We add AND remove the loading attribute once the dataset has loaded.
Result Full HTML CSS JS
Edit Download

Full Code

<!DOCTYPE html>
<html>

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

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

<body class="zg-body">
  <zing-grid caption="Default Loading Screen" src="https://" source="Grid is NEVER supposed to load. Just display loading text ?">
  </zing-grid>
  <script></script>
</body>

</html>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ZingGrid Demo</title>
    <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
  </head>
  <body class="zg-body">
    <zing-grid 
      caption="Default Loading Screen" 
      src="https://"
      source="Grid is NEVER supposed to load. Just display loading text ?">
    </zing-grid>
	</body>
</html>
zing-grid[loading] {
  height:400px;
}

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

Demo Gallery