Libraryless. Click here for Pure Java version (5297L/31K).
1 | sclass HBubblesProgressBar extends HTMLBase {
|
2 | S mainClass = "bubble-progress-bar"; |
3 | S id = aGlobalID(); |
4 | |
5 | S preprocessCSS(S css) { ret replace(css, ".mc", "." + mainClass); }
|
6 | |
7 | *() {
|
8 | css([[ |
9 | .mc {
|
10 | position: relative; |
11 | width: 50vw; |
12 | top: 50%; |
13 | left: 50%; |
14 | transform: translate3d(-50%, -50%, 0); |
15 | } |
16 | |
17 | .mc input {
|
18 | display: none; |
19 | } |
20 | |
21 | .mc label div {
|
22 | position: absolute; |
23 | top: 0; |
24 | left: 0; |
25 | background: linear-gradient(to bottom, #A3E2EF 35%, #4F9CC0); |
26 | height: 100%; |
27 | width: 0%; |
28 | box-shadow: 0 0 8px 1px white inset; |
29 | } |
30 | |
31 | .mc label div:before {
|
32 | content: ""; |
33 | display: block; |
34 | width: 100%; |
35 | height: 100%; |
36 | position: absolute; |
37 | top: 0; |
38 | left: 0; |
39 | background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/172299/bubbles-mask.gif); |
40 | mix-blend-mode: overlay; |
41 | opacity: 0.5; |
42 | } |
43 | |
44 | .mc span {
|
45 | display: inline-block; |
46 | color: #4F9CC0; |
47 | font-size: 0.7rem; |
48 | text-transform: uppercase; |
49 | letter-spacing: 1.5px; |
50 | margin-top: 0.7rem; |
51 | } |
52 | |
53 | .mc span:last-child {
|
54 | float: right; |
55 | } |
56 | ]]); |
57 | } |
58 | |
59 | public S html() {
|
60 | ret div(linesLL( |
61 | htag input(type := "checkbox", id := id + "-cb"), |
62 | hlabelFor(id + "-cb", emptydiv()), |
63 | span("Progress"),
|
64 | span("0%", id := id + "-progress"),
|
65 | ), |
66 | +id, class := mainClass); |
67 | } |
68 | |
69 | S demo() {
|
70 | ret hhtml(hbody(hcombine( |
71 | hcss([[ |
72 | html, body { margin: 0; height: 100%; width: 100%; }
|
73 | |
74 | body {
|
75 | background: #26323D; |
76 | background-image: radial-gradient(transparent 65%, rgba(black, 0.3)); |
77 | font-family: sans-serif; |
78 | } |
79 | ]]), |
80 | complete(), |
81 | hjs_dollarVars([[ |
82 | window.onload = function() {
|
83 | var elm = document.querySelector('#' + $id + '-progress');
|
84 | var div = document.querySelector('#' + $id + ' label div');
|
85 | setInterval(function(){
|
86 | if(!elm.innerHTML.match(/100%/gi)){
|
87 | elm.innerHTML = (parseInt(elm.innerHTML) + 1) + '%'; |
88 | div.style.width = elm.innerHTML; |
89 | } else {
|
90 | clearInterval(); |
91 | } |
92 | }, 100); |
93 | }; |
94 | ]], +id)))); |
95 | } |
96 | } |
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: | 108 / 225 |
| Version history: | 16 change(s) |
| Referenced in: | [show references] |