JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<button id="go">&raquo; Run</button>
<div id="block">100%</div><br>
<div id="block2">Boss</div>

CSS

div {
    background-color: #bca;
    width: 100px;
    border: 1px solid green;
  }

JavaScript

$( "#go" ).click(function() {
  $( "#block" ).animate({
    width: "90px"
  }, 500 ).html('90%').delay(2000).animate({
    width: "80px"
  }, 500 ).html('80%').delay(2000).animate({
    width: "70px"
  }, 500 ).html('70%').delay(2000).animate({
    width: "60px"
  }, 500 ).html('60%').delay(2000).animate({
    width: "50px"
  }, 500 ).html('50%').delay(2000).animate({
    width: "40px"
  }, 500 ).html('40%').delay(2000).animate({
    width: "30px"
  }, 500 ).html('30%').delay(2000).animate({
    width: "20px"
  }, 500 ).html('20%').delay(2000).animate({
    width: "10px"
  }, 500 ).html('10%').delay(2000).animate({
    width: "0px"
  }, 500 ).html('0%');
  
  
  $( "#block2" ).delay(1000).animate({
    width: "90px"
  }, 500 ).delay(2000).animate({
    width: "80px"
  }, 500 ).delay(2000).animate({
    width: "70px"
  }, 500 ).delay(2000).animate({
    width: "60px"
  }, 500 ).delay(2000).animate({
    width: "50px"
  }, 500 ).delay(2000).animate({
    width: "40px"
  }, 500 ).delay(2000).animate({
    width: "30px"
  }, 500 ).delay(2000).animate({
    width: "20px"
  }, 500 ).delay(2000).animate({
    width: "10px"
  }, 500 ).delay(2000).animate({
    width: "0px"
  }, 500 );
});