/* (A) WRAPPER */
#up-wrap, #up-wrap * {
  font-family: arial, sans-serif;
  box-sizing: border-box;
}
#up-wrap {
  width: 100%;
  padding: 20px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.4);
}

/* (B) PROGRESS BAR */
#up-progress, #up-bar, #up-percent { height: 30px; }
#up-progress {
  position: relative;
  background: #fff;
}
#up-bar {
  background: #d3e3ff;
  width: 0;
  transition: width 0.5s;
}
#up-percent {
  position: absolute; top: 0; left: 0;
  width: 100%; display: flex;
  align-items: center; justify-content: center;
}