Not logged in.  Login/Logout/Register | List snippets | | Create snippet | Upload image | Upload data

96
LINES

< > BotCompany Repo | #1032753 // HBubblesProgressBar (almost works, doesn't look 100%)

JavaX fragment (include) [tags: use-pretranspiled]

Libraryless. Click here for Pure Java version (5297L/31K).

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))));
  }
}

download  show line numbers  debug dex  old transpilations   

Travelled to 3 computer(s): bhatertpkbcr, mowyntqkapby, mqqgnosmbjvj

No comments. add comment

Snippet ID: #1032753
Snippet name: HBubblesProgressBar (almost works, doesn't look 100%)
Eternal ID of this version: #1032753/17
Text MD5: d7552526258be9ce10aace2fcfce6038
Transpilation MD5: 69796aa4ad59e0c71bf2969e1c75d2aa
Author: stefan
Category: javax / html
Type: JavaX fragment (include)
Public (visible to everyone): Yes
Archived (hidden from active list): No
Created/modified: 2021-10-04 15:32:28
Source code size: 2483 bytes / 96 lines
Pitched / IR pitched: No / No
Views / Downloads: 69 / 172
Version history: 16 change(s)
Referenced in: [show references]