How to Add a Simple Visual Loading Technique
Published June 28, 2018 | Categories: Web Development
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>Recent Posts
