How to make a progressbar with time data?

Question

I want to make a progressbar and the value will be a time between the beginning and the end of an action. like exemple ( i start at 1pm to 3pm ) i want to make something like, see the progression between the two hours.

I started with a simple progresse bar with random value:

import React from 'react';
import './ProgressBar.css'

const ProgressBar = ({width, progressColor}) => (
  <div>
    <div className="meter" style={{background: progressColor}}>
      <span style={{width: width +'%', background: progressColor}} className="progress"/>
    </div>
  </div>
);

export default ProgressBar

and

import React, {Component} from 'react';
import './index.css';
import ProgressBar from "./ProgressBar";
import Clock from 'react-live-clock';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      width: 20,
      clock: ''
    }
  }

  render() {
    return (
      <div>
        <div className="">
          <ProgressBar width={this.state.width} progressColor={"#1725b5"}/>
        </div>
      </div>
    )
  }
}

And now i am looking for values over time.

Answer 1

 function progress(timeleft, timetotal, $element) { var progressBarWidth = timeleft * $element.width() / timetotal; $element.find('div').animate({ width: progressBarWidth }, timeleft == timetotal? 0: 1000, 'linear').html(timeleft + " seconds to go"); if(timeleft > 0) { setTimeout(function() { progress(timeleft - 1, timetotal, $element); }, 1000); } }; progress(20, 20, $('#progressBar'));

 #progressBar { width: 90%; margin: 10px auto; height: 22px; background-color: #0A5F44; } #progressBar div { height: 100%; text-align: right; padding: 0 10px; line-height: 22px; /* same as #progressBar height if we want text middle aligned */ width: 0; background-color: #CBEA00; box-sizing: border-box; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div id="progressBar"> <div></div> </div>

Answer 2

This is how I would do it:

1. Have ProgressBar be a dumb component. It only needs to know about what progress to render
2. Have App be a smart component which knows start and end values and keeps track of progress based on the current time (it calculates what value to provide to the ProgressBar )

I've used minutes instead of hours here so that it is easier to demonstrate. Update the start , end and getProgress to suit your requirements.

 const ProgressBar = ({status, progressColor}) => ( <div style={{background: '#fff', border: '1px solid #000', overflow: 'hidden'}}> <div style={{transform: `scaleX(${status})`, transformOrigin: '0 0', transition: 'transform 1s', height: 10, background: progressColor}} /> </div> ); class App extends React.Component { constructor(props) { super(props); this.state = { progress: this.getProgress(), } } getProgress() { const {start, end} = this.props; const now = new Date().valueOf(); return (now - start) / (end - start); } componentDidMount() { this.interval = setInterval(() => { const progress = this.getProgress(); if (progress > 1) { clearInterval(this.interval); } this.setState({ progress }); }, 1000); } render() { return ( <div> <div> <ProgressBar status={this.state.progress} progressColor={"#1725b5"}/> </div> </div> ) } } const now = new Date().valueOf(); const start = Math.floor(now / 60000) * 60000; // current minute const end = start + 60000; // start + 1 minute ReactDOM.render( <App start={start} end={end} />, document.getElementById('app') );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="app" />