Match progress design

hide progress bar and use SVG to recreate the ring bar

Author: yourWaifu

lib/reporters/html.js

@@ -37,7 +37,7 @@ exports = module.exports = HTML;
 
 var statsTemplate =
   '<ul id="mocha-stats">' +
-  '<li class="progress-contain"><em>0</em>% <progress class="progress-element" max="100" value="0" /></li>' +
+  '<li class="progress-contain"><progress class="progress-element" max="100" value="0"></progress><svg class="progress-ring"><circle class="ring-whole"/><circle class="ring-highlight" stroke-dasharray="0%,100%"/></svg><div class="progress-text"><em>0</em>%</div></li>' +
   '<li class="passes"><a href="javascript:void(0);">passes:</a> <em>0</em></li>' +
   '<li class="failures"><a href="javascript:void(0);">failures:</a> <em>0</em></li>' +
   '<li class="duration">duration: <em>0</em>s</li>' +
@@ -71,6 +71,7 @@ function HTML(runner, options) {
   var stack = [report];
   var progressText = items[0].getElementsByTagName('em')[0];
   var progressBar = items[0].getElementsByTagName('progress')[0];
+  var progressRing = items[0].getElementsByClassName('ring-highlight')[0];
   var root = document.getElementById('mocha');
 
   if (!root) {
@@ -228,6 +229,12 @@ function HTML(runner, options) {
         percent.toFixed(Math.min(Math.max(decmalPlaces, 0), 100))
       );
     }
+    if (progressRing) {
+      var radius = 19; // to do, figure out how to match with css
+      var wholeArc = Math.PI * 2 * radius;
+      var highlightArc = percent * (wholeArc / 100);
+      progressRing.style['stroke-dasharray'] = `${highlightArc}px,${wholeArc}px`;
+    }
 
     // update stats
     var ms = new Date() - stats.start;

mocha.css

@@ -334,20 +334,47 @@ body {
   z-index: 1;
 }
 
-#mocha-stats .progress {
+#mocha-stats .progress-contain {
   float: right;
-  padding-top: 0;
-
-  /**
-   * Set safe initial values, so mochas .progress does not inherit these
-   * properties from Bootstrap .progress (which causes .progress height to
-   * equal line height set in Bootstrap).
-   */
-  height: auto;
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
-  background-color: initial;
+  padding: 0;
+}
+
+#mocha-stats .progress-element {
+  visibility: hidden;
+  width: 40px;
+  height: 20px;
+  position: absolute;
+  top: 11px; /* padding */
+  display: block;
+}
+
+#mocha-stats .progress-text {
+  text-align: center;
+  position: absolute;
+  width: 40px;
+  display: block;
+  top: 11px; /* padding */
+}
+
+#mocha-stats .progress-ring {
+  width: 40px;
+  height: 40px;
+}
+
+#mocha-stats .ring-whole, #mocha-stats .ring-highlight {
+  cx: 20px; /* half of width */
+  cy: 20px; /* half of height */
+  r: 19px; /* radius - stroke */
+  fill: var(--mocha-bg-color);
+  stroke-width: 2px;
+}
+
+#mocha-stats .ring-whole {
+  stroke: var(--mocha-stats-color);
+}
+
+#mocha-stats .ring-highlight {
+  stroke: var(--mocha-stats-em-color);
 }
 
 #mocha-stats em {