Adding progress bars to the inline diagrams in the documentation

src/js/main.js

@@ -29,7 +29,7 @@ window._gaq = (typeof _gaq !== 'undefined') ? _gaq : {
 
   _.each(document.querySelectorAll('figure[data-expr]'), element => {
     var parser = new Parser(),
-        svg;
+        svg, percentage;
 
     element.className = _.compact([element.className, 'loading']).join(' ');
     element.innerHTML = [
@@ -38,17 +38,23 @@ window._gaq = (typeof _gaq !== 'undefined') ? _gaq : {
         '<div></div>',
         '<div></div>',
       '</div>',
+      '<div class="progress"><div style="width: 0;"></div></div>',
       element.innerHTML
     ].join('');
 
     svg = element.querySelector('.svg');
+    percentage = element.querySelector('.progress div');
 
     setTimeout(() => {
       parser.parse(element.getAttribute('data-expr'))
         .invoke('render', svg, document.querySelector('#svg-base').innerHTML)
+        .then(null, null, progress => {
+          percentage.style.width = progress * 100 + '%';
+        })
         .finally(() => {
           element.className = _.without(element.className.split(' '), 'loading').join(' ');
           element.removeChild(element.querySelector('.spinner'));
+          element.removeChild(element.querySelector('.progress'));
         })
         .done();
     }, 1);

src/js/regexper.js

@@ -12,7 +12,7 @@ export default class Regexper {
     this.warnings = root.querySelector('#warnings');
     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.percentage = root.querySelector('.progress div');
     this.svgContainer = root.querySelector('#regexp-render');
     this.svgBase = this.root.querySelector('#svg-base').innerHTML;
   }