Overhead loading

Another cool feature from these plugins is that they provide animations for charts, making the final result very user friendly.

By loading the pieces of JavaScript code at the end of the HTML, we will acquire more speed in page rendering for the end user. The side effect of this is that the elements created by the JavaScript libraries will render the page after it is shown to the user, causing some temporary glitches in the screen.

To solve this, many pages use the strategy of creating an overlay loading that will be hidden after the document is ready.

To do this, just after the opening of the <body> tag, create a <div> to keep the loading, as follows:

<body>
  <div class="loading">
  </div>
  … <!—rest of the HTML content -->
</body>

We added a loading animated .svg file in the images folder, so in the CSS, we create the following rules:

.loading {
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100%;
  background-image: url('../imgs/loading.svg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-color: #e5e9ec;
}

This will create an overlay element that will appear at the top of all elements, except for the navigation bar. This element will fill the complete width and height of the page, while containing the loading animated image in the center of it.

Refresh the page and you will see the loading on top of your dashboard web application, as follows:

Now we must remove the loading image after the page is ready. So, in the beginning of the JavaScript file, before the first line inside the $(document).ready function, remove the loading element:

$(document).ready(function() {
    // when page is loaded, remove the loading
    $('.loading').remove();
    // below goes the rest of the JavaScript code
});

Done! Refresh the web browser and you may see the loading screen depending on your computer and network.

The loading element may see an overreaction now, because we still do not have too many cards on our dashboard, but we will keep adding them, so it is cautious to start handling this problem.

Previous Chapter

Filling the main content

Next Chapter

Fixing the toggle button for mobile

Table of Contents for Bootstrap 4 – Responsive Web Design

Overhead loading

Table of Contents for
Bootstrap 4 – Responsive Web Design