Improve animation and display of progress bar

assets/stylesheets/book/progress.less

@@ -1,3 +1,17 @@
+/* Chrome, Safari, Opera */
+@-webkit-keyframes animate-loading
+{
+    from {width: 0%;}
+    to {}
+}
+
+/* Standard syntax */
+@keyframes animate-loading
+{
+    from {width: 0%;}
+    to {}
+}
+
 .book .book-body {
     @chapter-size: 16px;
     @bar-background: #eee;
@@ -7,6 +21,7 @@
         width: 100%;
         position: relative;
         background: #fff;
+        margin-bottom: 20px;
 
         .bar {
             height: 10px;
@@ -22,14 +37,23 @@
             .inner {
                 height: 100%;
                 width: 0%;
+
                 background: @brand-success;
+                -webkit-animation: animate-loading 1s; /* Chrome, Safari, Opera */
+                animation: animate-loading 1s;
+
+                .in-inner {
+                    height: 100%;
+                    width: 50%;
+                    
+                }
             }
         }
 
         .chapters {
             position: absolute;
-            right: 50px;
-            left: 50px - @chapter-size;
+            right: 20px + @chapter-size;
+            left: 20px;
             top: 7px;
 
             .chapter {

lib/parse/progress.js

@@ -2,7 +2,7 @@ var _ = require("lodash");
 
 var calculProgress = function(navigation, current) {
     var n = _.size(navigation);
-    var percent = 0;
+    var percent = 0, prevPercent = 0;
     var done = true;
 
     var chapters = _.chain(navigation)
@@ -22,6 +22,8 @@ var calculProgress = function(navigation, current) {
         if (nav.path == current) {
             percent = nav.percent;
             done = false;
+        } else if (done) {
+            prevPercent = nav.percent;
         }
         
         return nav;
@@ -30,6 +32,7 @@ var calculProgress = function(navigation, current) {
 
 
     return {
+        prevPercent: prevPercent,
         percent: percent,
         chapters: chapters
     };

templates/page.html

@@ -11,7 +11,7 @@
         <div class="page-wrapper">
             <div class="book-progress">
                 <div class="bar">
-                    <div class="inner" style="width: {{ progress.percent }}%;"></div>
+                    <div class="inner" style="width: {{ progress.percent }}%;min-width: {{ progress.prevPercent }}%;"></div>
                 </div>
                 <div class="chapters">
                 {% for p in progress.chapters %}
@@ -19,7 +19,7 @@
                 {% endfor %}
                 </div>
             </div>
-        
+
             <div class="page-inner">
             {% for section in content %}
                 <section class="{{ section.type }}" id="section-{{ section.id }}">