28 06, 2018

How to Add a Simple Visual Loading Technique

By | 2018-06-28T08:40:11+00:00 June 28th, 2018|Categories: Web Development|Tags: , , , , |

Adding a simple loader message to a content heavy page adds for a better user experience. So for instance, if you have a large data table or directory listing that doesn’t load nicely. This can be updated to a simple loading message until the content has finished loading.

Also, adding in a little spinner or indicator is a nice touch to show the page is processing information.

Step 1: Create your loading CSS styles and HTML structure.

Step 2: Add the jQuery and update to your classes, as needed.

Step 3: Add the noscript tag with appropriate styles to show content for viewers browsers that have Javascript disabled.

Example:

CSS:

.loading-content { visibility: hidden; }

jQuery:

jQuery(window).load(function () {

jQuery(‘.loading-content’).css(‘visibility’,’visible’);

jQuery(‘.loading’).css(‘display’,’none’);

})

HTML:

<div class=”loading”><strong>Loading Information </strong> <img src=”/images/icons/loader.gif” alt=”Loading”/></div>

<div class=”content-area loading-content”> Content that will be loaded. </div>

<noscript>

<style>

.loading-content { visibility: visible; }

.loading { display: none; }

</style>

</noscript>