React

HTML

<div id="app"></div>

CSS

#app {
  font-size: 200px;
  margin: 50px;
}

React

function sleep(ms) {  return new Promise(resolve => setTimeout(resolve, ms)); }

  let i = 0
  let loopLength = 1000;

let myHeavyFunc = async (updateProgress) => {
    updateProgress((i+1)/loopLength);
    i++;
  if (i < loopLength) { // Stop the animation after 2 seconds
    window.requestAnimationFrame(() => myHeavyFunc(updateProgress));
    
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      progress: 0,
    }
  }
  
  updateProgress = (progress) => {
  this.setState({progress}); 
  };
  
  render() {
  	let {progress} = this.state;
    return <h1 onClick={() => myHeavyFunc(this.updateProgress)}>{progress}</h1>;
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('app')
);