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