Source code to the progress function

So in a browser window open up the Javascript console from a website of your choice like say https://www.interfaceware.com.

Then copy paste this code in to reset your browser:

document.head.innerHTML = ''
document.body.innerHTML = '<h1>A heading</h1><div class="BLOCKone">Block</div>';

This is the source code for our progress function.

function PROGtransition(T){
   if (!T.action) { return; }   // No action supplied
   var Time = T.time || 1000;   // 1000 is our default.
   var Percent = 101;
   var TimerId = setInterval(function(){
      Percent--;
      T.action(Percent);
      if (Percent == 0){
         clearTimeout(TimerId);
         if (T.end){
            T.end();
         }
      }
   }, Time / 100);
}

We can copy paste this function into the Javascript console.

Then we can try it out immediately with this invocation of the function which you can also copy paste into the Javascript console:

PROGtransition({action : function(N) { console.log(N); }});

Now let’s get try something silly like supplying an action function which changes the opacity of the body so all the text fades away to 10% opacity.

PROGtransition({
  action : function(N){
     var Opacity = .1 + .9 * (N/100);  
     document.body.style.opacity = Opacity;
  }
});

Now let’s reverse that so the text comes back:

PROGtransition({
   action : function(N){
      document.body.style.opacity = (100-N)/100;
    } 
});

Now let’s change the background to black to red:

PROGtransition({action : function (N){
     var Color =  (255*((100-N)/100));   
     Color = Math.floor(Color);  // important that we round to an integer    
     var RGB = Color + ",0,0";
     document.body.style.backgroundColor = "rgb(" + RGB + ")";   
  } 
});

And then from white to black:

PROGtransition({action : function (N){
     var Color = 255*(N/100);   
     Color = Math.floor(Color);  // important that we round to an integer    
     var RGB = Color + "," + Color + "," + Color;
     document.body.style.backgroundColor = "rgb(" + RGB + ")";   
  } 
});

Concepts

Source code to the progress function

Related content