JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
<div class="progress-loader">

<div class="container">
<div class="item">
  <span style="font-size: 20px;">3</span>
  <span style="font-size: 12px;">Files</span>
</div>
</div>
  <div class="file">
    <div class="file-name">
       <span class="name">photo-1474039369477-5e74ff1f0e57.jpg</span>
       <span id="percentage">10%</span>
    </div>
    <div id="myProgress">
      <div class="line" id="myBar"></div>
    </div>
  </div>
  <div class="file">
    <div class="file-name">
       <span class="name">photo-1474039369477-5e74ff1f0e57.jpg</span>
       <span id="percentage">100%</span>
    </div>
    <div id="myProgress">
      <div class="line" id="myBar"></div>
    </div>
  </div>
  <div class="file">
    <div class="file-name">
       <span class="name">photo-1474039369477-5e74ff1f0e57.jpg</span>
       <span id="percentage">100%</span>
    </div>
    <div id="myProgress">
      <div class="line" id="myBar"></div>
    </div>
  </div>
</div>


<!-- Number of files
Independant progress
Global progress
File name
File size
File type -->

CSS

.progress-loader {
  width: 220px;
  min-height: 260px;
  background: #00968857;
  border: 4px solid #009688;
  font-family: 'Montserrat', sans-serif;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 5px;
  position: absolute;
  bottom: 40px;
  left: 5px;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
}

#myProgress {
  width: 100%;
  background-color: #ddd;
}

#myBar {
  height: 6px;
  background-color: #009688;
  line-height: 30px;
  color: white;
}

.file {
  display: flex;
  justify-content: center;
  padding: 3px;
  flex-direction: column;
  width: 100%;
}

.name {
  width: 180px;
  overflow: hidden;
  height: 20px;
  line-height: 20px;
  text-overflow: ellipsis;
  text-transform: capitalize;
  /* word-break: break-all; */
}

.file-name {
  font-size: 12px;
  display: flex;
  justify-content: space-between;
}

.upload-img {
  width: 70%;
}

.container {
  position: relative;
  top: 100px;
  left: calc(50% - 70px);
  transform: translate(-50%, -50%);
  height: 120px;
  margin-bottom: 40px;
}

.container .item {
  position: relative;
  height: 80px;
  width: 80px;
  background: #ddd;
  border:10px solid #ccc;
  border-radius: 100%;
  color: #009688;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-weigth: 600;
}
.container .item-ok {
  position: relative;
  height: 80px;
  width: 80px;
  /* background: #009688; */
  border:10px solid #009688;
  border-radius: 100%;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.container .item:before,
.container .item:after {
  border: 2px solid #ddd;
  content: "";
  width: 100%;
  display: block;
  position: absolute;
  height: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 100%;
  transform-origin: center center;
  opacity: 0;
  box-sizing: border-box;
}

.container .item:before {
  animation: 1s 0.1s pulse2 infinite linear;
}

.container .item::after {
 ...

JavaScript

var i = 0;

function move() {
  if (i == 0) {
    i = 1;
    var elem = document.getElementById("myBar");
    var width = 10;
    var id = setInterval(frame, 10);

    function frame() {
      if (width >= 100) {
        clearInterval(id);
        i = 0;
      } else {
        width++;
        elem.style.width = width + "%";
        /* elem.innerHTML = width + "%"; */
        document.getElementById("percentage").innerHTML = width + "%";
        setTimeout(function() {
          $('.container .item').addClass('item-ok').removeClass('item');
        }, 1000);

      }
    }
  }
}
move();