Linear Processing

by James Hughes

HTML

<h2>Linear Processing</h2>
<a href="javascript:;" onclick="doProcessing(); return false;" class="button">Process</a>
<div id="progress-meter" class="status_msg">Ready</div>
Test Input: <input type="text"/>

CSS

body {
    font-family: Verdana;
}
.button {
    border: 1px solid black;
    background: #fff;
    padding: 5px;
    color: black;
    text-decoration: none;
}
.button:hover{
    background: #ddd;
}
.status_msg {
    color: #999;
    margin-top: 0.5em;
    font-size: 18pt;
}
h2 {
    margin-bottom: 10px;
}

JavaScript

(function(){
  function doProcessing(){
    var el = document.getElementById("progress-meter");
    el.innerHTML = "Processing";
    for(var i = 0; i < 99999999; i++){
      var j = Math.round(Math.sqrt(i));
    }
    el.innerHTML = "Done!";
  }
 
 window.doProcessing = doProcessing;
 }());