Yellow progress bar while download is in progress.

client/components/ProgressBar.js

@@ -9,8 +9,10 @@ export default class ProgressBar extends React.Component {
 
   render() {
     const failed = this.props.value < 0;
+    const inProgress = this.props.value < 1 && this.props.value > 0;
     const classes = classnames('progress-bar', {
       'progress-bar-failed': failed,
+      'progress-bar-in-progress': inProgress,
       'progress-bar-small': this.props.small
     })
 

client/components/UploadPage.js

@@ -70,7 +70,7 @@ export default class UploadPage extends React.Component {
             numCompleted++
           }
         }
-
+        keys.reverse()
         return <div className="page">
 
           <Spinner dir="up" animated {...this.state.file} />
@@ -80,7 +80,7 @@ export default class UploadPage extends React.Component {
           <p>This link will work as long as this page is open.</p>
 
           <div className="data">
-            { Object.keys(this.state.peerProgress).map((key) => {
+            { keys.map((key) => {
               return <ProgressBar value={this.state.peerProgress[key]} small />
             })}
           </div>

css/index.styl

@@ -6,6 +6,7 @@ light-blue = #40C0CB
 light-gray = #EEE
 light-green = #AEE239
 light-red = #E23430
+light-yellow = #FFE476
 red = #C40D08
 
 @keyframes rotate {
@@ -200,6 +201,18 @@ p {
         }
     }
 
+    &.progress-bar-in-progress {
+
+        .progress-bar-inner {
+            background: #FFCC00
+            box-shadow: inset 0 1px 1px light-yellow
+        }
+
+        .progress-bar-text {
+            color: black
+        }
+    }
+
     &.progress-bar-small {
         height: 30px
         width: 50%