Filling up a progress bar using ajax

I have implemented a food tracker using css. Now, I want to perform a query from my database and update the progress bar accordingly using ajax. It is actually for the statuses of food("waiting","confirmed","in preparation","ready"). What should i send via ajax and can you give me the idea of how to do it?

please help me

Here is part of the code:

<div class="progressbar">
  <ul >
    <li>
        <img style="width:130px;height:130px;margin-left:100px"src="foodStatusImages/waiting.png">
        <i style="margin-left:150px" class="fa fa-check"></i>
        <h5 style="margin-left:80px;display: inline-block;white-space: nowrap;">Waiting for 
        confirmation</h5>
    </li>

    <li>
        <img style="width:130px;height:130px;margin-left:200px;"src="foodStatusImages/confirmed.png">
        <i style="margin-left:250px" class="fa fa-check"></i>
        <h5 style="margin-left:190px;display: inline-block;white-space: nowrap;">Order Confirmed</h5>

    </li>

        <li>
        <img style="width:130px;height:130px;margin-left:350px"src="foodStatusImages/preparing.png">
        <i style="margin-left:400px"class="fa fa-check"></i>
        <h5 style="margin-left:350px;display: inline-block;white-space: nowrap;">In preparation... 
    </h5>
    </li>

    <li>
        <img style="width:130px;height:130px;margin-left:530px;"src="foodStatusImages/Ready.png">
        <i style="margin-left:590px" class="fa fa-check"></i>
        <h5 style="margin-left:520px;display: inline-block;white-space: nowrap;">Your order is 
     ready</h5>
    </li>-->

<ul>
</div>

The css file:

 ul li .fa
 {
    margin-top:10px;
    margin-bottom: 10px;
    background: #ccc;
    width:25px;
    height: 25px;
    color:#fff;
    border-radius:50%;
    padding: 5px;
    padding-right: 5px;
 }

ul li
{
  position: relative;
}
ul li .fa::after
{
  content: '';
  background: #ccc;
  height:6px;
  width:700px;
  display: block;
  position: absolute;
  left:0;
  top:150px;
  z-index: -1
}
 ul li:nth-child(3) .fa 
{
  background: #148e14;
}

 ul li:first-child .fa::after
{
width: 167px;
left:150px;
 }

ul li:nth-child(2) .fa::after 
{
width:299px;
left:140px;




} 

ul li:nth-child(3) .fa::after 
{
 width:290px;
 left:260px;

}

  ul li:nth-child(4) .fa::after 
  {
   width:220px;
   left:370px;
 }