How to Add a Simple Visual Loading Technique

By Zedric Myers | 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>

Contact Us To Find Out More

Have questions? Need help? Contact us and we'll be in touch soon!

* Required

Beacon
164 Thatcher Road
Greensboro, NC 27409
Map and Directions

Sales & Marketing
336.232.5687