Styled image tile with progress bar

Author: minusfive

client/app/components/progress-bar.js

@@ -0,0 +1,7 @@
+export default Ember.Component.extend({
+  classNames: ['progress-bar'],
+  attributeBindings: ['style'],
+  style: function() {
+    return 'width: ' + this.get('progress') + '%;';
+  }.property('progress')
+});

client/app/components/ui-spinner.js

@@ -19,13 +19,13 @@ var SPINNER_PROPS = [
 
 export default Ember.Component.extend({
   lines: 13,            // The number of lines to draw
-  length: 20,           // The length of each line
-  width: 10,            // The line thickness
-  radius: 30,           // The radius of the inner circle
+  length: 5,           // The length of each line
+  width: 5,            // The line thickness
+  radius: 10,           // The radius of the inner circle
   corners: 1,           // Corner roundness (0..1)
   rotate: 0,            // The rotation offset
   direction: 1,         // 1: clockwise, -1: counterclockwise
-  color: '#000',        // #rgb or #rrggbb or array of colors
+  color: '#999',        // #rgb or #rrggbb or array of colors
   speed: 1,             // Rounds per second
   trail: 60,            // Afterglow percentage
   shadow: false,        // Whether to render a shadow

client/app/styles/views/images.scss

@@ -32,11 +32,23 @@ section.images {
       left: 0;
       right: 0;
       bottom: 0;
-      background: #ddd;
+      background: #eee;
       color: #666;
       font-size: 1em;
       font-weight: 400;
       margin: 0;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      padding: 5px;
+    }
+
+    .progress-bar {
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      height: 2px;
+      background: $green;
     }
   }
 }

client/app/templates/components/image-item.hbs

@@ -8,7 +8,7 @@
     {{error}}
   {{else}}
     {{ui-spinner}}
-    [{{image.wholeProgress}}%]
     <h2>{{image.file.name}}</h2>
+    {{progress-bar progress=image.wholeProgress}}
   {{/if}}
 {{/if}}