diff --git a/src/components/Bai.js b/src/components/Bai.js
index fa875f1..c9daff7 100644
--- a/src/components/Bai.js
+++ b/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 {
Would you like to download the model?
By clicking Accept below, you will download the model which may be between 100 mb in size to 1 gb.
-
+
{this.props.loading}
+
{this.props.loading?this.props.downloadProgress+"%":""}
)
diff --git a/src/components/css/ProgressBar.css b/src/components/css/ProgressBar.css
new file mode 100644
index 0000000..52a3a4d
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/components/subcomponents/ProgressBar.js b/src/components/subcomponents/ProgressBar.js
new file mode 100644
index 0000000..7c87dcc
--- /dev/null
+++ b/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 (
+
+ );
+ }
+};
+
+export default ProgressBar;
\ No newline at end of file