column of progress bar on each row of html table to show processing of each file

by Zsanett Tamás

HTML

<input value="Start Animation" name="" type="button" onclick="start_animation()" />
<table width="100%">
  <tr>
    <th>Files</th>
    <th>Type</th>
    <th>1.2MB</th>
    <th>Status </th>
  </tr>
  <tr>
    <td>File 1</td>
    <td>Excel</td>
    <td>2MB</td>
    <td>
      <span class="one">100%</span>

    </td>
  </tr>
  <tr>
    <td>File 2</td>
    <td>word</td>
    <td>100Kb</td>
    <td>
      <span class="one">100%</span>

    </td>
  </tr>
  <tr>
    <td>File 3</td>
    <td>Word</td>
    <td>800Kb</td>
    <td>
      <span class="one">100%</span>

    </td>
  </tr>
  <tr>
    <td>File 4 </td>
    <td>Power Point</td>
    <td>1MB</td>
    <td>
      <span class="two">40%</span>
    </td>
  </tr>
</table>

CSS

body {
  font-family: Open Sans, San-Serif;
  font-size: 16px;
  color: #595959;
  margin: 20px;
}

th {
  font-weight: 700;
  text-align: center;
  border: solid 1px #ccc;
  padding: 5px 0;
}

td {
  vertical-align: middle;
  height: 34px;
  text-align: center;
  padding: 10px;
  border: solid 1px #ccc;
}

.one {
  line-height: 25px;
  border-radius: 5px;
  text-align: center;
  display: block;
  color: white;
  height: 25px;
}

@keyframes one {
  0% {
    width: 0%;
  }

  100% {
    width: 100%;
    background-color: #5dc96e;
  }
}

.two {
  text-align: center;
  line-height: 25px;
  height: 25px;
  border-radius: 5px;
  display: block;
  color: white;
}

@keyframes two {
  0% {
    width: 0%;
  }

  100% {
    width: 40%;
    background-color: red;
  }
}

JavaScript

function start_animation() {
  setTimeout(
    function animation1() {
      document.getElementsByClassName("one")[0].style.animation = "one 2s linear forwards";
      setTimeout(animation1, 100);
    }, 100);
  next1();
}

function next1() {
  setTimeout(
    function animation2() {
      document.getElementsByClassName("one")[1].style.animation = "one 2s linear forwards";
      setTimeout(animation2, 100);
    }, 2600);
  next2();
}

function next2() {
  setTimeout(
    function animation3() {
      document.getElementsByClassName("one")[2].style.animation = "one 2s linear forwards";
      setTimeout(animation3, 100);
    }, 4550);
  next3();
}

function next3() {
  setTimeout(
    function animation4() {
      document.getElementsByClassName("two")[0].style.animation = "two 2s linear forwards";
      setTimeout(animation4, 100);
    }, 6400);

}