You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

51 lines
1.3 KiB

import React from "react";
import "./index.scss";
export default class ProgressBar extends React.Component {
state = {
percent: 0,
};
componentDidMount() {
this.percentInterval = setInterval(() => {
this.setPercent();
}, this.props.interval);
}
componentWillUnmount() {
clearInterval(this.percentInterval);
}
setPercent = () => {
this.setState({ percent: this.state.percent + this.props.offset });
};
render() {
return (
<>
{window.innerWidth > 1000 ? (
<div className="progresss d-flex">
<div style={{ width: this.state.percent + "%" }}>
{this.state.percent ? (
<span className="d-flex align-items-center justify-content-center">
{this.state.percent}%
</span>
) : null}
</div>
</div>
) : null}
{window.innerWidth < 1000 ? (
<div className="mobile-progress d-flex">
<div style={{ width: this.state.percent + "%" }}>
{this.state.percent ? (
<span className="d-flex align-items-center justify-content-center">
{this.state.percent}%
</span>
) : null}
</div>
</div>
) : null}
</>
);
}
}