progress bar animation not visible

Up the learning curve with Vue. Found this progress bar by Josh Bivens ->Thanks.

https://codepen.io/joshbivens/pen/mPRovV

I got the code working and I use the progress to show processing of some activity. The pseudo code would be something like

//--------------------------

             makeProgress(10);  //Total 35
    //...... do backend processing 2
makeProgress(25);  //Total 60
//...... do backend processing 3
makeProgress(25);  //Total 85
//...... do backend processing 4
makeProgress(15);  //Total 100
//...... do backend processing 4
clearDiv("shell");

//--------------------------

Quite simple, I do some backend processing , increment the progress bar and on finishing, clears the div. The code works all fine but the PROBLEM is the user cannot see the progress happening. The first 25 is visible but the rest isn't. The logs tell me it's works fine.

The output is like below-

1. The first 25 progress can be seen.
2. Then the browser gets stuck depend on how much backend jobs it has to do
3. The rest increments aren't visbile till it reaches 100%.

What am I missing to show a smooth progression?