Adding progress indicator

src/index.html

@@ -16,6 +16,10 @@
       <div></div>
       <div></div>
     </div>
+
+    <div id="progress">
+      <div style="width: 0%;"></div>
+    </div>
   </div>
 
   <div id="error"></div>

src/js/parser/javascript/base.js

@@ -1,6 +1,9 @@
 import _ from 'lodash';
 import Q from 'q';
 
+var renderCounter = 0,
+    maxCounter = 0;
+
 export default {
   setContainer(container) {
     this.container = container;
@@ -85,17 +88,40 @@ export default {
     console.log(box, anchorLine.node);
   },
 
+  startRender() {
+    renderCounter++;
+  },
+
+  doneRender() {
+    if (maxCounter === 0) {
+      maxCounter = renderCounter;
+    }
+
+    renderCounter--;
+    document.body.dispatchEvent(new CustomEvent('updateStatus', {
+      detail: {
+        percentage: (maxCounter - renderCounter) / maxCounter
+      }
+    }));
+
+    if (renderCounter === 0) {
+      maxCounter = 0;
+    }
+  },
+
   render(container) {
     if (container) {
       this.setContainer(container);
     }
 
+    this.startRender();
     return this._render()
       .then((() => {
         if (this.anchorDebug) {
           this.renderAnchor();
         }
       }).bind(this))
+      .then(this.doneRender.bind(this))
       .then(_.constant(this));
   },
 

src/js/regexper.js

@@ -10,6 +10,7 @@ export default class Regexper {
     this.error = root.querySelector('#error');
     this.permalink = root.querySelector('a[data-glyph="link-intact"]');
     this.download = root.querySelector('a[data-glyph="data-transfer-download"]');
+    this.percentage = root.querySelector('#progress div');
     this.svg = root.querySelector('#regexp-render svg');
 
     this.padding = 10;
@@ -46,12 +47,18 @@ export default class Regexper {
     }
   }
 
+  updatePercentage(event) {
+    this.percentage.style.width = event.detail.percentage * 100 + '%';
+  }
+
   bindListeners() {
     this.field.addEventListener('keypress', this.keypressListener.bind(this));
 
     this.form.addEventListener('submit', this.submitListener.bind(this));
 
     window.addEventListener('hashchange', this.hashchangeListener.bind(this));
+
+    this.root.addEventListener('updateStatus', this.updatePercentage.bind(this));
   }
 
   setState(state) {

src/sass/_base.scss

@@ -1,5 +1,6 @@
 $green: #bada55;
-$dark-green: #89a20c;
+$dark-green: shade($green, 25%);
+$light-green: tint($green, 25%);
 $gray: #6b6659;
 $tan: #cbcbba;
 $red: #b3151a;

src/sass/main.scss

@@ -4,6 +4,7 @@
 @import 'compass/typography/lists/inline-block-list';
 @import 'compass/typography/vertical_rhythm';
 @import 'compass/css3/box-shadow';
+@import 'compass/css3/border-radius';
 @import 'compass/css3/user-interface';
 @import 'compass/css3/animation';
 @import 'compass/css3/transform';
@@ -163,7 +164,7 @@ header {
       display: inline-block;
       position: absolute;
       border: 3px solid $green;
-      border-radius: 50%;
+      @include border-radius(50%);
 
       @include animation(bounce 2.0s infinite ease-in-out);
     }
@@ -192,6 +193,32 @@ header {
   }
 }
 
+#progress {
+  width: rhythm(20);
+  height: rhythm(1/2);
+  border: 1px solid $dark-green;
+  overflow: hidden;
+  margin: 0 auto;
+  margin-top: rhythm(1);
+
+  div {
+    background: $green;
+    @include background-image(linear-gradient(
+      -45deg,
+      $green 25%,
+      $light-green 25%,
+      $light-green 50%,
+      $green 50%,
+      $green 75%,
+      $light-green 75%,
+      $light-green 100%
+    ));
+    background-size: rhythm(2) rhythm(2);
+    background-repeat: repeat-x;
+    height: 100%;
+  }
+}
+
 #error {
   background: $red;
   color: $white;