CODEWITHSUNDEEP
javascriptreactjs
waner
waner

Reputation: 67

How to make a progressbar with time data?

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.

Upvotes: 1

Views: 3308

Answers (2)

Soc
Soc

Reputation: 7780

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" />

Upvotes: 2

Nevin
Nevin

Reputation: 779

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>

Upvotes: 1

Related Questions