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
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} |
|
</> |
|
); |
|
} |
|
}
|
|
|