Added progressbar while computing

index.html

@@ -177,16 +177,25 @@
             <button class="export-kml-button"><span class="ico kml"></span></button>
         </div>
     </div>
-    <div id="map" style="display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 150px;"></div>
-    <div id="data" style="display: block; position: absolute; height: 150px; left: 0px; right: 0px; bottom: 0px;">
+    <div id="map"></div>
+    <div id="data" class="data">
         <canvas id="chart" width="100%" height="100%"></canvas>
     </div>
 
-    <div id="data-empty" style="display: block; position: absolute; height: 150px; left: 0px; right: 0px; bottom: 0px; background-color: #FFFFFF; text-align: center;"><h2><i class="fa fa-area-chart fa-3x" aria-hidden="true"></i><br/>Rien à montrer ici...</h2>Commencez à tracer votre itinéraire pour voir les données le concernant.</i></div>
-    <div id="data-invalid" style="display: none; position: absolute; height: 150px; left: 0px; right: 0px; bottom: 0px; background-color: #FFFFFF; text-align: center;"><h2><i class="fa fa-exclamation-triangle fa-3x" aria-hidden="true"></i><br/>Tracé invalide !</h2>Le tracé est invalide: l'itinéraire n'a pas pu être calculé avec le dernier marqueur. Déplacez le marqueur translucide pour ré-essayer un nouvel itinéraire.</i></div>
-    <div id="data-computing" style="display: none; position: absolute; height: 150px; left: 0px; right: 0px; bottom: 0px; background-color: #FFFFFF; text-align: center; overflow: hidden;"><h2><i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i><br/><strong><span id="data-computing-progress"></span> <small>- <span id="data-computing-status">Calculs en cours...</span></small></h2></div>
+    <div id="data-empty" class="data">
+        <h2><i class="fa fa-area-chart fa-3x" aria-hidden="true"></i><br/>Rien à montrer ici...</h2>
+        Commencez à tracer votre itinéraire pour voir les données le concernant.
+    </div>
+    <div id="data-invalid" class="data">
+        <h2><i class="fa fa-exclamation-triangle fa-3x" aria-hidden="true"></i><br/>Tracé invalide !</h2>
+        Le tracé est invalide: l'itinéraire n'a pas pu être calculé avec le dernier marqueur. Déplacez le marqueur translucide pour ré-essayer un nouvel itinéraire.
+    </div>
+    <div id="data-computing" class="data">
+        <h2><i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i><br/>
+            <strong><span id="data-computing-progress"></span> <small>- <span id="data-computing-status">Calculs en cours...</span></small></strong>
+            <div id="data-computing-progressbar-container"><div id="data-computing-progressbar"></div></div></h2></div>
     <div id="loading" style="display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; background-color: #FFFFFF; z-index: 5000; text-align: center;"><h2><i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i><br/>Chargement en cours...</h2></div>
-    <div id="mobile-warning" style="display: none; position: fixed; top: 0px; bottom: 0px; left: 0px; right: 0px; z-index: 10000; background-color: #C0C0C0"><strong>Attention:</strong> ce site n'est pas destiné aux mobiles. <button>Ok, j'ai compris</button></div>
+    <div id="mobile-warning"><strong>Attention:</strong> ce site n'est pas destiné aux mobiles. <button>Ok, j'ai compris</button></div>
 
     <script src="js/map2gpx.min.js"></script>
 </body>

src/js/state.js

@@ -7,6 +7,7 @@
 
     const $h2 = $('#data-computing h2');
     const $progress = $('#data-computing-progress');
+    const $progressbar = $('#data-computing-progressbar');
     const $status = $('#data-computing-status');
     const $pending = $('#data-computing-pending');
 
@@ -61,6 +62,7 @@
             p = _progress / _total;
 
         $progress.text(Math.round(p * 100) + '%');
+        $progressbar.css('width', Math.round(p * 100) + '%');
 
         if (Math.round(p * 100) == 42)
             $('<div><small>La grande question sur la vie, l\'univers et le reste répondue</small></div>').insertAfter($h2).fadeOut(400, function () {this.remove();});