diff --git a/lib/reporters/html.js b/lib/reporters/html.js
index 70e8698407..1ebd394588 100644
--- a/lib/reporters/html.js
+++ b/lib/reporters/html.js
@@ -35,7 +35,7 @@ exports = module.exports = HTML;
 /**
  * Stats template.
  */
-
+var statsBar = '<div id="progress-bar"></div>';
 var statsTemplate =
   '<ul id="mocha-stats">' +
   '<li class="progress"><canvas width="40" height="40"></canvas></li>' +
@@ -61,6 +61,7 @@ function HTML(runner, options) {
 
   var self = this;
   var stats = this.stats;
+  var results = fragment(statsBar);
   var stat = fragment(statsTemplate);
   var items = stat.getElementsByTagName('li');
   var passes = items[1].getElementsByTagName('em')[0];
@@ -111,7 +112,7 @@ function HTML(runner, options) {
       hideSuitesWithout('test fail');
     }
   });
-
+  root.appendChild(results);
   root.appendChild(stat);
   root.appendChild(report);
 
@@ -209,7 +210,7 @@ function HTML(runner, options) {
         fragment('<pre class="error">%e%e</pre>', message, stackString)
       );
     }
-
+    results.className += ' error';
     self.addCodeToggle(el, test.body);
     appendToStack(el);
     updateStats();
diff --git a/mocha.css b/mocha.css
index 4ca8fcb897..b7f1085cd7 100644
--- a/mocha.css
+++ b/mocha.css
@@ -257,6 +257,22 @@ body {
   letter-spacing: 1px;
 }
 
+#progress-bar{
+  height: 15px;
+  border-radius: 5px;
+  border: solid  #00e600;
+  padding: 5px 5px 5px 5px;
+  background-color: #00e600;
+}
+
+#progress-bar.error {
+  height: 15px;
+  border-radius: 5px;
+  border: solid  #c00;
+  padding: 5px 5px 5px 5px;
+  background-color: #c00;
+}
+
 #mocha-stats {
   position: fixed;
   top: 15px;