X

How to Add a Simple Visual Loading Technique

Est. Reading Time: 2 minutes

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>

Categories: Web Development
Tags: jquery loaderloadingloading contentloading pageloading page content
Zedric Myers :Zedric Myers is a Web Designer for Beacon Technologies. After earning his degree in Advertising and Graphic Design, he spent 11 years with an advertising agency in Greensboro, NC where he was initially hired as a designer and transitioned to being a Web Developer.