How to create a Progress Loader

Introduction:

  • A progress loader is a visual message that the page is busy and wants you to wait.
  • There are two types of progress loader. One is determinate, where we know before hand how much time the task will take to complete. The other is indeterminate, where we don’t know when the task will end.
  • In this example we will be using an animated gif. Which is an animated image, that keeps looping. You can search Google for an animated loading gif to download and use.

Here’s a video of how to set this up:


  • The code for the text-editor source
<div id="loading" style="text-align:center">
<img alt="" height="272" src="https://static.leadshook.io/upload/test1/tenor-1579701518943.gif" width="482" />
</div>

<div id="loaded" style="display: none;">
<h1>Your page has fully loaded!</h1>
</div>
  • And the code for the JavaScipt
<script>
setTimeout(function() { 
document.getElementById("loading").style.display="none";
document.getElementById("loaded").style.display="block";
}, 5*1000);
</script>

If you like you can download a copy of this demo Decision Tree. Then you can import it into your own account.

progress-loader_2020-01-22Download
Tagged: