sclass HBubblesProgressBar extends HTMLBase {
  S mainClass = "bubble-progress-bar";
  S id = aGlobalID();
  
  S preprocessCSS(S css) { ret replace(css, ".mc", "." + mainClass); }
  
  *() {
    css([[
      .mc {
        position: relative;
        width: 50vw;
        top: 50%;
        left: 50%;
        transform: translate3d(-50%, -50%, 0);
      }
      
      .mc input {
        display: none;
      }
      
      .mc label div {
        position: absolute;
        top: 0;
        left: 0;
        background: linear-gradient(to bottom, #A3E2EF 35%, #4F9CC0);
        height: 100%;
        width: 0%;
        box-shadow: 0 0 8px 1px white inset;
      }
      
      .mc label div: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;
      }
      
      .mc span {
        display: inline-block;
        color: #4F9CC0;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        margin-top: 0.7rem;
      }
      
      .mc span:last-child {
        float: right;
      }
    ]]);
  }
  
  public S html() {
    ret div(linesLL(
      htag input(type := "checkbox", id := id + "-cb"),
      hlabelFor(id + "-cb", emptydiv()),
      span("Progress"),
      span("0%", id := id + "-progress"),
    ),
    +id, class := mainClass);
  }
 
  S demo() {
    ret hhtml(hbody(hcombine(
      hcss([[
        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;
        }
      ]]),
      complete(),
      hjs_dollarVars([[
        window.onload = function() {
          var elm = document.querySelector('#' + $id + '-progress');
          var div = document.querySelector('#' + $id + ' label div');
          setInterval(function(){
            if(!elm.innerHTML.match(/100%/gi)){
              elm.innerHTML = (parseInt(elm.innerHTML) + 1) + '%';
              div.style.width = elm.innerHTML;
            } else {
              clearInterval();
            }
          }, 100);
        };
      ]], +id))));
  }
}