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 myHeavyFunc = async (updateProgress) => {
  let loopLength = 1000000;
  let current = 0;
  for(let i=0; i<loopLength; i++) {
    const result = Math.floor(((i+1)/loopLength)*100);
    if(current != result) {
       setTimeout(()=> {
           updateProgress(result);
       }, result *100);
    }
    current = result;
  }
}


class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      progress: 0,
    }
    this.progressRef = React.createRef(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')
);