<div id="container">
  <input type="checkbox" id="water"/>
  <label for="water">
    <div id="fill"></div>
  </label>
  <span>Progress</span>
  <span id="progress">0%</span>
</div>

@keyframes grow {
  from {
    width: 0%
  }
  to {
    width: 100%;
  }
}
html, body {
  margin: 0;
  height: 100%;
  width: 100%;
}
body {
  background: #26323D;
  background-image: radial-gradient(transparent 65%, rgba(black, 0.3));
  font-family: sans-serif;
}
#container {
  position: relative;
  width: 50vw;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
}
input {
  display: none;
}
label {
  position: relative;
  display: block;
  width: 100%;
  height: 40px;
  background: transparent;
  border-radius: 0.4rem;
  border: 2px solid white;
  overflow: hidden;
  box-shadow: -2px 0 8px 0 rgba(white, 0.6);
  div {
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(to bottom, #A3E2EF 35%, #4F9CC0);
    height: 100%;
    width: 0%;
    animation: grow 2s forwards;
    box-shadow: 0 0 8px 1px white inset;
    &:before {
      content: '';
      display: block;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/172299/bubbles-mask.gif);
      mix-blend-mode: overlay;
      opacity: 0.5;
    }
  }
}
span {
  display: inline-block;
  color: #4F9CC0;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-top: 0.7rem;
  &:last-child {
    float: right;
  }
}

window.onload = function(){
  var elm = document.querySelector('#progress');
  setInterval(function(){
    if(!elm.innerHTML.match(/100%/gi)){
      elm.innerHTML = (parseInt(elm.innerHTML) + 1) + '%';
    } else {
      clearInterval();
    }
  }, 18)
}