Bubble Fill Status Progress Button

[{"id":"15895c2c-87ec-42e6-8162-8d7d502c3f64","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"c6eb08d5-b487-49fe-9483-56828db064c7","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\"* {\\n box-sizing: border-box;\\n}\\n\\nbody {\\n margin: 0;\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n background: #ffffff;\\n font-family: Arial, Helvetica, sans-serif;\\n}\\n\\n.bubble-status-btn {\\n position: relative;\\n display: inline-flex;\\n align-items: center;\\n justify-content: center;\\n\\n min-width: 160px;\\n min-height: 48px;\\n padding: 8px 24px;\\n\\n overflow: hidden;\\n border: 1px solid #e4e4e7;\\n border-radius: 999px;\\n\\n background: #ffffff;\\n color: #18181b;\\n\\n font-size: 16px;\\n font-weight: 600;\\n\\n cursor: pointer;\\n outline: none;\\n\\n transition:\\n transform 200ms ease,\\n padding 300ms ease,\\n border-color 300ms ease;\\n}\\n\\n.bubble-status-btn:hover,\\n.bubble-status-btn.is-loading,\\n.bubble-status-btn.is-success {\\n border-color: #18181b;\\n}\\n\\n.bubble-status-btn:active {\\n transform: scale(0.96);\\n}\\n\\n.bubble-status-dot {\\n position: absolute;\\n left: 24px;\\n\\n width: 8px;\\n height: 8px;\\n border-radius: 999px;\\n\\n background: #18181b;\\n\\n transform: scale(1);\\n transition: transform 500ms ease;\\n}\\n\\n.bubble-status-btn:hover .bubble-status-dot,\\n.bubble-status-btn.is-loading .bubble-status-dot,\\n.bubble-status-btn.is-success .bubble-status-dot {\\n transform: scale(45);\\n}\\n\\n.bubble-status-text {\\n position: relative;\\n z-index: 2;\\n\\n display: inline-block;\\n margin-left: 18px;\\n\\n color: #18181b;\\n white-space: nowrap;\\n\\n transition:\\n transform 500ms ease,\\n opacity 500ms ease;\\n}\\n\\n.bubble-status-btn:hover .bubble-status-text,\\n.bubble-status-btn.is-loading .bubble-status-text,\\n.bubble-status-btn.is-success .bubble-status-text {\\n transform: translateX(80px);\\n opacity: 0;\\n}\\n\\n.bubble-status-layer {\\n position: absolute;\\n inset: 0;\\n z-index: 3;\\n\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n gap: 8px;\\n\\n color: #ffffff;\\n white-space: nowrap;\\n\\n opacity: 0;\\n transform: translateX(-64px);\\n\\n transition:\\n transform 500ms ease,\\n opacity 500ms ease;\\n}\\n\\n.bubble-status-btn:hover .bubble-status-layer,\\n.bubble-status-btn.is-loading .bubble-status-layer,\\n.bubble-status-btn.is-success .bubble-status-layer {\\n opacity: 1;\\n transform: translateX(0);\\n}\\n\\n.bubble-status-icon {\\n width: 16px;\\n height: 16px;\\n}\\n\\n.bubble-loader {\\n width: 16px;\\n height: 16px;\\n\\n border: 2px solid rgba(255, 255, 255, 0.35);\\n border-top-color: #ffffff;\\n border-radius: 999px;\\n\\n animation: bubble-spin 700ms linear infinite;\\n}\\n\\n.bubble-status-btn.is-success .bubble-status-layer {\\n color: #ffffff;\\n}\\n\\n.bubble-status-btn:focus-visible {\\n outline: 2px solid #18181b;\\n outline-offset: 4px;\\n}\\n\\n@keyframes bubble-spin {\\n to {\\n transform: rotate(360deg);\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Bubble Fill Status Progress Button\\n \\n \\n \\n \\n \\n \\n\",\"language\":\"html\"},{\"id\":\"/package.json\",\"name\":\"package.json\",\"code\":\"{\\n \\\"dependencies\\\": {},\\n \\\"main\\\": \\\"/index.html\\\",\\n \\\"devDependencies\\\": {}\\n}\",\"language\":\"json\"},{\"id\":\"/index.js\",\"name\":\"index.js\",\"code\":\"const bubbleStatusButton = document.querySelector(\\\"#bubbleStatusButton\\\");\\nconst bubbleStatusLayer = document.querySelector(\\\"#bubbleStatusLayer\\\");\\n\\nconst idleContent = `\\n Button\\n \\n \\n \\n \\n`;\\n\\nconst loadingContent = `\\n \\n Processing...\\n`;\\n\\nconst successContent = `\\n \\n \\n \\n Complete!\\n`;\\n\\nlet currentStatus = \\\"idle\\\";\\n\\nfunction setButtonStatus(status) {\\n currentStatus = status;\\n\\n bubbleStatusButton.classList.remove(\\\"is-loading\\\", \\\"is-success\\\");\\n\\n if (status === \\\"idle\\\") {\\n bubbleStatusLayer.innerHTML = idleContent;\\n return;\\n }\\n\\n if (status === \\\"loading\\\") {\\n bubbleStatusButton.classList.add(\\\"is-loading\\\");\\n bubbleStatusLayer.innerHTML = loadingContent;\\n return;\\n }\\n\\n if (status === \\\"success\\\") {\\n bubbleStatusButton.classList.add(\\\"is-success\\\");\\n bubbleStatusLayer.innerHTML = successContent;\\n }\\n}\\n\\nbubbleStatusButton.addEventListener(\\\"click\\\", () => {\\n if (currentStatus !== \\\"idle\\\") return;\\n\\n setButtonStatus(\\\"loading\\\");\\n\\n setTimeout(() => {\\n setButtonStatus(\\\"success\\\");\\n\\n setTimeout(() => {\\n setButtonStatus(\\\"idle\\\");\\n }, 3000);\\n }, 2000);\\n});\",\"language\":\"javascript\"}]","template":"vanilla-ts","activeFile":"/index.html","viewMode":"both","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]"},"children":[]},{"id":"112efb74-2505-4c0e-9477-6c6d7f1e45c8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"341edda0-c5e5-4bd5-bd5a-e61e0c211d55","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"daf2a1f8-3928-46bd-81ba-f4e4f0774d63","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\" \",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4b818970-a633-4e5c-9f7a-6338009197c0","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"afc7a20a-adba-4938-952b-24b80950c656","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"2my9dcnjf\",\"name\":\"styles.css\",\"code\":\"* {\\n box-sizing: border-box;\\n}\\n\\nbody {\\n margin: 0;\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n background: #ffffff;\\n font-family: Arial, Helvetica, sans-serif;\\n}\\n\\n.bubble-status-btn {\\n position: relative;\\n display: inline-flex;\\n align-items: center;\\n justify-content: center;\\n\\n min-width: 160px;\\n min-height: 48px;\\n padding: 8px 24px;\\n\\n overflow: hidden;\\n border: 1px solid #e4e4e7;\\n border-radius: 999px;\\n\\n background: #ffffff;\\n color: #18181b;\\n\\n font-size: 16px;\\n font-weight: 600;\\n\\n cursor: pointer;\\n outline: none;\\n\\n transition:\\n transform 200ms ease,\\n padding 300ms ease,\\n border-color 300ms ease;\\n}\\n\\n.bubble-status-btn:hover,\\n.bubble-status-btn.is-loading,\\n.bubble-status-btn.is-success {\\n border-color: #18181b;\\n}\\n\\n.bubble-status-btn:active {\\n transform: scale(0.96);\\n}\\n\\n.bubble-status-dot {\\n position: absolute;\\n left: 24px;\\n\\n width: 8px;\\n height: 8px;\\n border-radius: 999px;\\n\\n background: #18181b;\\n\\n transform: scale(1);\\n transition: transform 500ms ease;\\n}\\n\\n.bubble-status-btn:hover .bubble-status-dot,\\n.bubble-status-btn.is-loading .bubble-status-dot,\\n.bubble-status-btn.is-success .bubble-status-dot {\\n transform: scale(45);\\n}\\n\\n.bubble-status-text {\\n position: relative;\\n z-index: 2;\\n\\n display: inline-block;\\n margin-left: 18px;\\n\\n color: #18181b;\\n white-space: nowrap;\\n\\n transition:\\n transform 500ms ease,\\n opacity 500ms ease;\\n}\\n\\n.bubble-status-btn:hover .bubble-status-text,\\n.bubble-status-btn.is-loading .bubble-status-text,\\n.bubble-status-btn.is-success .bubble-status-text {\\n transform: translateX(80px);\\n opacity: 0;\\n}\\n\\n.bubble-status-layer {\\n position: absolute;\\n inset: 0;\\n z-index: 3;\\n\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n gap: 8px;\\n\\n color: #ffffff;\\n white-space: nowrap;\\n\\n opacity: 0;\\n transform: translateX(-64px);\\n\\n transition:\\n transform 500ms ease,\\n opacity 500ms ease;\\n}\\n\\n.bubble-status-btn:hover .bubble-status-layer,\\n.bubble-status-btn.is-loading .bubble-status-layer,\\n.bubble-status-btn.is-success .bubble-status-layer {\\n opacity: 1;\\n transform: translateX(0);\\n}\\n\\n.bubble-status-icon {\\n width: 16px;\\n height: 16px;\\n}\\n\\n.bubble-loader {\\n width: 16px;\\n height: 16px;\\n\\n border: 2px solid rgba(255, 255, 255, 0.35);\\n border-top-color: #ffffff;\\n border-radius: 999px;\\n\\n animation: bubble-spin 700ms linear infinite;\\n}\\n\\n.bubble-status-btn.is-success .bubble-status-layer {\\n color: #ffffff;\\n}\\n\\n.bubble-status-btn:focus-visible {\\n outline: 2px solid #18181b;\\n outline-offset: 4px;\\n}\\n\\n@keyframes bubble-spin {\\n to {\\n transform: rotate(360deg);\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f20df3ed-3ce0-4432-9705-e4455d9cdfdf","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"d5f354dd-c46f-4e30-a02c-82cc5d9e6d3b","type":"divider","props":{},"children":[]},{"id":"825cbf03-edff-4bf6-b60c-cd05959aa8c2","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"0a630e59-7486-41ea-9285-43ba1f25f4e1","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Style\n","styles":{"bold":true}},{"type":"text","text":"The button uses a white rounded pill shape, dark text, and a small black dot on the left.","styles":{}}],"children":[]},{"id":"cc4d1f8d-f0f7-419b-89d8-bc7504bc98e5","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover\n","styles":{"bold":true}},{"type":"text","text":"When hovered, the small dot scales up until it fills the button background. The original text slides out, and the white overlay text slides in.","styles":{}}],"children":[]},{"id":"79847dd2-60ee-423a-8705-5bd582e4f4b8","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Click Status\n","styles":{"bold":true}},{"type":"text","text":"When clicked, the button changes from ","styles":{}},{"type":"text","text":"Button","styles":{"bold":true}},{"type":"text","text":" to ","styles":{}},{"type":"text","text":"Processing...","styles":{"bold":true}},{"type":"text","text":", then to ","styles":{}},{"type":"text","text":"Complete!","styles":{"bold":true}},{"type":"text","text":", and finally resets back to the idle state.","styles":{}}],"children":[]},{"id":"2ae7783e-0c2b-4c8b-ae73-cc7e80efd9f9","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Important Code","styles":{"bold":true}}],"children":[]},{"id":"aedd6cf3-624b-4f71-822c-012b52c62b58","type":"procode","props":{"code":".bubble-status-btn:hover .bubble-status-dot,\n.bubble-status-btn.is-loading .bubble-status-dot,\n.bubble-status-btn.is-success .bubble-status-dot {\n transform: scale(45);\n}","language":"javascript","filename":"","files":"[{\"id\":\"cbvgy50b3\",\"name\":\"code\",\"code\":\".bubble-status-btn:hover .bubble-status-dot,\\n.bubble-status-btn.is-loading .bubble-status-dot,\\n.bubble-status-btn.is-success .bubble-status-dot {\\n transform: scale(45);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4a8d8e73-b3bc-4a37-8aa6-5992efd26f72","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This makes the small dot expand into the full button background.","styles":{}}],"children":[]},{"id":"07c9e2b1-1c1e-43f2-86bc-e1411b7ffeb5","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Text Slide","styles":{"bold":true}}],"children":[]},{"id":"92881eb9-0b6e-465b-919d-2337b44c8204","type":"procode","props":{"code":".bubble-status-btn:hover .bubble-status-text {\n transform: translateX(80px);\n opacity: 0;\n}","language":"javascript","filename":"","files":"[{\"id\":\"t83j1ph26\",\"name\":\"code\",\"code\":\".bubble-status-btn:hover .bubble-status-text {\\n transform: translateX(80px);\\n opacity: 0;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c9cf83b6-8624-4e4e-b2d5-3e1bcfe433c9","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This moves the first text away.","styles":{}}],"children":[]},{"id":"cb207bb0-dc13-4b76-b8f8-d83df07c3281","type":"procode","props":{"code":".bubble-status-btn:hover .bubble-status-layer {\n opacity: 1;\n transform: translateX(0);\n}","language":"javascript","filename":"","files":"[{\"id\":\"ul5os9kmc\",\"name\":\"code\",\"code\":\".bubble-status-btn:hover .bubble-status-layer {\\n opacity: 1;\\n transform: translateX(0);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"369e614a-9d82-440c-ae63-399f628df6eb","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This brings the hover text into the center.","styles":{}}],"children":[]},{"id":"40579e72-ebed-4553-864c-d9968e027db5","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Duration\n","styles":{"bold":true}},{"type":"text","text":"Change this value to make the hover animation faster or slower:","styles":{}}],"children":[]},{"id":"2e154b5b-2533-4fe2-a957-a379fc292737","type":"procode","props":{"code":"transition: transform 500ms ease;","language":"javascript","filename":"","files":"[{\"id\":\"bf2le5brl\",\"name\":\"code\",\"code\":\"transition: transform 500ms ease;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f472084c-7e38-444c-8a90-95e896066f75","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Lower ","styles":{}},{"type":"text","text":"500ms","styles":{"code":true}},{"type":"text","text":" to make it faster. Increase it to make it smoother.","styles":{}}],"children":[]},{"id":"e9ef0168-15c5-4888-9498-6df605dcf7d9","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Loading Time\n","styles":{"bold":true}},{"type":"text","text":"Change this value in ","styles":{}},{"type":"text","text":"index.js","styles":{"code":true}},{"type":"text","text":":","styles":{}}],"children":[]},{"id":"d72dc06b-92b0-4565-a1a2-6a90bc300add","type":"procode","props":{"code":"}, 2000);","language":"javascript","filename":"","files":"[{\"id\":\"2iatktcn0\",\"name\":\"code\",\"code\":\"}, 2000);\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"cfb723b1-54fb-4878-9b89-004679ced015","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Lower ","styles":{}},{"type":"text","text":"2000","styles":{"code":true}},{"type":"text","text":" to make loading faster. Increase it to make loading slower.","styles":{}}],"children":[]},{"id":"141fcd35-5110-474f-9cec-b4454eb252d2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]