Added progress bar to the metadata on the overview (#844)

* Added progress bar to Torrent metadata on the overview.

* Added progress bar to Torrent metadata on the overview.

* Made progress bar smaller

As proposed by dcposh.

src/renderer/pages/TorrentListPage.js

@@ -93,6 +93,7 @@ module.exports = class TorrentList extends React.Component {
     } else if (torrentSummary.status !== 'paused' && prog) {
       elements.push(
         <div key='progress-info' className='ellipsis'>
+          {renderProgressBar()}
           {renderPercentProgress()}
           {renderTotalProgress()}
           {renderPeers()}
@@ -105,6 +106,11 @@ module.exports = class TorrentList extends React.Component {
 
     return (<div key='metadata' className='metadata'>{elements}</div>)
 
+    function renderProgressBar () {
+      var progress = Math.floor(100 * prog.progress)
+      return (<progress value={progress} max='100'>{progress}%</progress>)
+    }
+
     function renderPercentProgress () {
       var progress = Math.floor(100 * prog.progress)
       return (<span key='percent-progress'>{progress}%</span>)

static/main.css

@@ -455,6 +455,11 @@ i:not(.disabled):hover { /* Show they're clickable without pointer: cursor */
   line-height: 1.5em;
 }
 
+progress {
+  width: 60px;
+  margin-right: 8px;
+}
+
 /*
  * TORRENT LIST: ERRORS
  */