Added a Progress Bar

src/components/Bai.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import {downloadModel, loadingModel, predict} from '../actions'
+import ProgressBar from "./subcomponents/ProgressBar";
 //import { Link } from 'react-router-dom';
 import './css/Bai.css';
 
@@ -50,8 +51,9 @@ class Bai extends React.Component {
         <div className="content">
             <h1>Would you like to download the model?</h1>
             <p>By clicking Accept below, you will download the model which may be between 100 mb in size to 1 gb.</p>
-            <button className={this.props.loading?"hide":""} onClick={()=>{this.props.loadingModel();this.props.downloadModel()}}>Accept</button>
+            <button className={this.props.loading?"hide":""} onClick={()=>{this.props.loadingModel();this.props.downloadModel()}}>Accept Download</button>
             <h2>{this.props.loading}</h2>
+            <ProgressBar progress={this.props.downloadProgress}/>
             <h2>{this.props.loading?this.props.downloadProgress+"%":""}</h2>
         </div>
         )

src/components/css/ProgressBar.css

@@ -0,0 +1,16 @@
+.ProgressBar {
+    height: 40px;
+    width: 100%;
+    border-style: solid;
+    border-width:1px;
+    border-radius: 3px;
+    padding:0;
+    background-color: #BCBABA;
+}
+
+.ProgressBar .Bar {
+    height: 100%;
+    width:0;
+    background-color: #CDFBFA;
+    margin: 0 !important;
+}

src/components/subcomponents/ProgressBar.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import '../css/ProgressBar.css';
+
+class ProgressBar extends React.Component {
+    render () {
+        let pg = document.getElementById("ProgressBar");
+
+        let width = 0;
+
+        if (pg !== null) {
+        
+            width = pg.offsetWidth*(this.props.progress/100);
+
+        }
+
+
+        return (
+            <div className="ProgressBar" id="ProgressBar">
+                <div style={{width:width+"px"}} className="Bar"></div>
+            </div>
+        );
+    }
+};
+
+export default ProgressBar;