sclass HBubblesProgressBar extends HTMLBase {
  S mainClass = "bubble-progress-bar";
  S id = aGlobalID();
  
  S preprocessCSS(S css) { ret replace(css, ".mc", "." + mainClass); }
  
  *() {
    css([[
      @keyframes grow {
        from {
          width: 0%
        }
        to {
          width: 100%;
        }
      }

      .mc {
        position: relative;
        width: 50vw;
        top: 50%;
        left: 50%;
        transform: translate3d(-50%, -50%, 0);
      }
      
      .mc input {
        display: none;
      }
      
      .mc 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;
          }
        }
      }
      
      .mc 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;
        }
      }
    ]]);
  }
  
  S html() {
    ret div(linesLL(
      hemptytag input(type := "checkbox" id := id + "-cb"),
      hlabelFor(id + "-cb", emptydiv(id := "fill")),
      span("Progress"),
      span("0%", id := id + "-progress">),
    ),
    +id, class := mainClass);
  }
}