polished import progress bar

cms/static/sass/_import.scss

@@ -67,4 +67,28 @@
       white-space: normal;
     }
   }
+
+  .progress-bar {
+    display: none;
+    width: 350px;
+    height: 30px;
+    margin: 30px auto 10px;
+    border: 1px solid $blue;
+
+    &.loaded {
+      border-color: #66b93d;
+
+      .progress-fill {
+        background: #66b93d;
+      }
+    }
+  }
+
+  .progress-fill {
+    width: 0%;
+    height: 30px;
+    background: $blue;
+    color: #fff;
+    line-height: 48px;
+  }
 }
\ No newline at end of file

cms/templates/import.html

@@ -23,9 +23,9 @@
         <p class="file-name-block"><span class="file-name"></span><a href="#" class="choose-file-button-inline">change</a></p>
         <input type="file" name="course-data" class="file-input">
         <input type="submit" value="Replace my course with the one above" class="submit-button">
-        <div class="progress" style="position:relative; margin-top:5px; width:250px; height:15px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; display:none;">
-          <div class="bar" style="background-color: #B4F5B4; width:0%; height:10px; border-radius: 3px;"></div>
-          <div class="percent" style="margin-top:5px;">0%</div>
+        <div class="progress-bar">
+          <div class="progress-fill"></div>
+          <div class="percent">0%</div>
         </div>
       </form>
     </article>
@@ -37,29 +37,35 @@
 <script>
 (function() {
     
-var bar = $('.bar');
+var bar = $('.progress-bar');
+var fill = $('.progress-fill');
 var percent = $('.percent');
 var status = $('#status');
+var submitBtn = $('.submit-button');
    
 $('form').ajaxForm({
     beforeSend: function() {
         status.empty();
         var percentVal = '0%';
-        bar.width(percentVal)
+        bar.show();
+        fill.width(percentVal);
         percent.html(percentVal);
+        submitBtn.hide();
     },
     uploadProgress: function(event, position, total, percentComplete) {
         var percentVal = percentComplete + '%';
-        bar.width(percentVal)
+        fill.width(percentVal);
         percent.html(percentVal);
     },
     complete: function(xhr) {
       if (xhr.status == 200) {
-        alert('Your import has been successful.');
+        alert('Your import was successful.');
         window.location = '${successful_import_redirect_url}';
       }
       else
         alert('Your import has failed.\n\n' + xhr.responseText);
+        submitBtn.show();
+        bar.hide();
     }
   }); 
 })();