Floating layers and status feedback
Document Review Progress Overlay

A progress blocker for document review scenarios: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.
Floating layers and status feedbackProgress overlayHTMLCSSJavaScript
With JavaScript enabled, you can edit, run, and save this example. The fixed source is as follows:
<!doctype html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Document Review Progress Overlay</title>
  <style>
    :root { --ink:#30231f; --paper:#f9efe5; --accent:#8b6fb0; --secondary:#d7a971; --line:color-mix(in srgb, var(--ink) 18%, transparent); --shadow:0 24px 60px color-mix(in srgb, var(--ink) 16%, transparent); color-scheme:light; }
    * { box-sizing:border-box; }
    html { min-width:320px; background:var(--paper); }
    body { min-height:100vh; margin:0; overflow-x:hidden; color:var(--ink); font-family:Avenir,"PingFang SC",sans-serif; background:var(--paper); }
    button,input,select,textarea { color:inherit; font:inherit; }
    button,[role="button"],input,select,textarea { accent-color:var(--accent); }
    button { cursor:pointer; }
    button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
    [hidden] { display:none !important; }
    @media (max-width:700px) { .mast h1 { line-height:1.08 !important; letter-spacing:-.035em !important; overflow-wrap:anywhere; } }
    @media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }
    .page{width:min(1320px,calc(100% - 56px));margin:auto;padding:10vh 0}.mast{display:grid;grid-template-columns:minmax(0,1fr) 160px;gap:10vw;margin-block:6vh;align-items:start;margin-bottom:10vh}.mast h1{font-family:Avenir,"PingFang SC",sans-serif;font-weight:500;font-size:clamp(38px,8vw,88px);letter-spacing:-.055em;margin:0;line-height:.96}.eyebrow{display:block;margin-bottom:24px;font:600 10px/1 ui-monospace,monospace;letter-spacing:.22em}.intro{max-width:52ch;margin-top:28px;line-height:1.8}.scenario{font-size:13px;text-align:right}.demo{border-radius:1px;border-color:color-mix(in srgb,var(--ink) 35%,transparent);box-shadow:none;position:relative;min-height:420px;padding:clamp(28px,5vw,70px);background:transparent}@media(max-width:700px){.page{width:calc(100% - 24px);padding:36px 0}.mast{grid-template-columns:1fr;margin-bottom:30px}.scenario{text-align:left}.demo{padding:18px}}
    .panel{padding:18px;border:3px solid var(--ink);background:var(--paper);box-shadow:8px 8px 0 var(--ink)}.stack{display:grid;gap:12px}.row{display:flex;flex-wrap:wrap;gap:8px}.action{min-height:42px;padding:8px 13px;border:3px solid var(--ink);background:var(--paper);font-weight:900}.action.primary,.action.is-active{color:var(--paper);background:var(--ink)}.status{min-height:24px;padding:8px;color:var(--paper);background:var(--ink);font-weight:900}.metric{font-size:clamp(34px,8vw,76px);font-weight:900;letter-spacing:-.08em}.muted{font-weight:600}.chip{padding:5px 8px;border:2px solid var(--ink);font-weight:900}.meter{height:14px;border:3px solid var(--ink)}.meter>i{display:block;height:100%;background:var(--ink)}
    .composition-gallery{margin:0;padding:clamp(8px,2vw,18px);border:1px solid var(--ink);background:color-mix(in srgb,var(--paper) 78%,transparent)}.gallery-caption{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:15px 4px 2px;font-size:12px}.gallery-caption::before,.gallery-caption::after{content:"";height:1px;background:var(--line)}.gallery-caption strong{font:800 11px/1.2 ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase}.composition-gallery .demo{box-shadow:none}.composition-gallery .demo::before{content:"";position:absolute;inset:10px;border:1px dashed color-mix(in srgb,var(--accent) 36%,transparent);pointer-events:none}
    .blocker-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,.65fr);gap:18px;align-items:center;min-height:390px;padding:clamp(24px,6vw,64px);border:1px solid var(--line);border-radius:30px;background:var(--paper)}.blocker-stage h2{grid-column:1;margin:.2em 0;font-size:clamp(34px,7vw,74px)}.blocker-stage p,.blocker-stage>.action{grid-column:1}.blocker-stage>.action{justify-self:start}.blocker-stage ul{grid-column:2;grid-row:1/5;display:grid;gap:8px;margin:0;padding:0;list-style:none}.blocker-stage li{display:flex;justify-content:space-between;gap:12px;padding:15px;border:1px solid var(--line);border-radius:12px}.blocker-stage li span{opacity:.55}.progress-blocker-demo dialog{width:min(470px,calc(100% - 28px));padding:36px;border:0;border-radius:28px;color:var(--ink);background:var(--paper);box-shadow:0 30px 100px #0008;text-align:center}.progress-blocker-demo dialog::backdrop{background:#07110dc7;backdrop-filter:blur(7px)}.blocker-spinner{display:grid;width:92px;aspect-ratio:1;place-items:center;margin:0 auto 20px;border:2px solid var(--line);border-radius:50%}.blocker-spinner i{width:54px;aspect-ratio:1;border:7px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:blockerSpin .8s linear infinite}.progress-blocker-demo dialog h2{margin:.25em 0}.blocker-progress{height:12px;overflow:hidden;border-radius:999px;background:var(--line)}.blocker-progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--accent),var(--secondary));transition:width .18s}.progress-blocker-demo dialog output{display:block;margin:12px;font-size:28px;font-weight:900}.progress-blocker-demo dialog button{padding:10px 16px;border:1px solid var(--line);border-radius:10px;background:transparent}@keyframes blockerSpin{to{transform:rotate(1turn)}}@media(max-width:650px){.blocker-stage{grid-template-columns:1fr}.blocker-stage h2,.blocker-stage p,.blocker-stage>.action,.blocker-stage ul{grid-column:auto;grid-row:auto}}.workflow-dispatch{display:grid;grid-template-columns:minmax(210px,.48fr) minmax(0,1.52fr);gap:18px}.dispatch-console{display:grid;align-content:start;gap:16px;padding:22px;border:1px solid var(--line);border-radius:18px;background:color-mix(in srgb,var(--secondary) 12%,var(--paper))}.dispatch-console h2{margin:.2em 0}.dispatch-console form,.dispatch-console label{display:grid;gap:7px}.dispatch-console input,.dispatch-console select{min-width:0;width:100%;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--paper)}.dispatch-console fieldset{display:flex;gap:12px;border:1px solid var(--line);border-radius:10px}.dispatch-console fieldset label{display:flex;align-items:center}.dispatch-workbench{--dispatch-load:.22;min-width:0;padding:14px;border-left:8px solid color-mix(in srgb,var(--accent) calc(var(--dispatch-load)*100%),var(--line));background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 8%,transparent),transparent 28%)}.dispatch-workbench[data-dispatch-priority="urgent"]{box-shadow:inset 0 0 0 2px var(--accent)}@media(max-width:900px){.workflow-dispatch{grid-template-columns:1fr}.dispatch-console{order:2}}
  </style>
</head>
<body data-aesthetic="minimal" data-composition="gallery-frame">
  <main class="page">
    <header class="mast"><div><span class="eyebrow">minimal / progress mask / BEGINNER</span><h1>Document Review Progress Overlay</h1><p class="intro">A progress blocker for document review scenarios: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.</p></div><span class="scenario">Document Review</span></header>
    <figure class="composition-gallery"><section class="demo" aria-label="Document review progress mask interactive area"><div class="workflow-dispatch"><aside class="dispatch-console"><span class="eyebrow">Document Review DISPATCH</span><h2>Review Queue Control Center</h2><form id="workflowDispatchForm"><label>Task Type<select id="workflowDispatchKind"><option>Text Editing</option><option>Structural Suggestions</option><option>Publish Confirmation</option></select></label><label>Pending reviews<input id="workflowDispatchAmount" type="number" min="1" max="9999" value="45"><span>item</span></label><fieldset><legend>Processing priority</legend><label><input type="radio" name="workflowPriority" value="normal" checked>Regular</label><label><input type="radio" name="workflowPriority" value="urgent">Urgent</label></fieldset><button class="action primary" type="submit">Submit for Review</button></form><label>Current task<select id="workflowDispatchActive" aria-label="Switch current task"><option value="1">Text Editing</option><option value="2">Structural Suggestions</option></select></label><output id="workflowDispatchSummary">Waiting for Dispatch</output></aside><section id="workflowCore" class="workflow-core dispatch-workbench" data-dispatch-priority="normal"><!-- 11DZ_CORE_START:overlays-feedback-progress-blocker --><section class="progress-blocker-demo"><div class="blocker-stage"><span class="eyebrow">PROGRESS BLOCKER</span><h2>Processing document review tasks</h2><p>Show modal progress only after it has been explicitly started; users can cancel at any time.</p><button id="blockerStart" class="action primary" type="button" data-core-bridge="overlays-feedback-progress-blocker">Start processing</button><ul><li>Document review reminder<span>Waiting</span></li><li>Document Review Favorites<span>Waiting</span></li><li>Document Review Overview<span>Waiting</span></li></ul></div><dialog id="progressBlocker" aria-labelledby="blockerTitle"><div class="blocker-spinner" aria-hidden="true"><i></i></div><span class="eyebrow">PROCESSING</span><h2 id="blockerTitle">Processing locally</h2><p id="blockerMessage">Preparing data…</p><div class="blocker-progress" role="progressbar" aria-label="Processing Progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><i id="blockerMeter"></i></div><output id="blockerValue">0%</output><button id="blockerCancel" type="button">Cancel Processing</button></dialog></section><!-- 11DZ_CORE_END --></section></div><p id="status" class="status" role="status" aria-live="polite"></p></section><figcaption class="gallery-caption"><strong>Document Review / GALLERY 03</strong></figcaption></figure>
  </main>
  <script>
    'use strict';
    const statusOutput = document.querySelector('#status');
    const announce = message => { statusOutput.textContent = message; };
    /* 11DZ_CORE_SCRIPT_START:overlays-feedback-progress-blocker */
const progressBlocker=document.querySelector('#progressBlocker');const blockerProgress=progressBlocker.querySelector('[role="progressbar"]');const blockerMeter=document.querySelector('#blockerMeter');const blockerValue=document.querySelector('#blockerValue');const blockerMessage=document.querySelector('#blockerMessage');let blockerTimer=0;let blockerCloseTimer=0;let blockerAmount=0;function cancelBlocker(message){clearInterval(blockerTimer);clearTimeout(blockerCloseTimer);blockerTimer=0;blockerCloseTimer=0;if(progressBlocker.open)progressBlocker.close();announce(message);}document.querySelector('#blockerStart').addEventListener('click',()=>{blockerAmount=0;blockerMeter.style.width='0%';blockerValue.textContent='0%';blockerProgress.setAttribute('aria-valuenow','0');blockerMessage.textContent='Preparing data…';progressBlocker.showModal();blockerTimer=setInterval(()=>{blockerAmount=Math.min(100,blockerAmount+10);blockerMeter.style.width=blockerAmount+'%';blockerValue.textContent=blockerAmount+'%';blockerProgress.setAttribute('aria-valuenow',String(blockerAmount));blockerMessage.textContent=blockerAmount<40?'Preparing data…':blockerAmount<80?'App Settings…':'Complete check…';if(blockerAmount===100){clearInterval(blockerTimer);blockerTimer=0;blockerCloseTimer=setTimeout(()=>cancelBlocker('Local processing complete'),350);}},160);});document.querySelector('#blockerCancel').addEventListener('click',()=>cancelBlocker('Processing canceled'));progressBlocker.addEventListener('cancel',event=>{event.preventDefault();cancelBlocker('Processing canceled');});
/* 11DZ_CORE_SCRIPT_END */
const workflowBridgeSpec={"name":"overlays-feedback-progress-blocker","selector":"[data-core-bridge=\"overlays-feedback-progress-blocker\"]","mode":"click","key":"Enter"};const workflowBridgeCore=document.querySelector('#workflowCore');const workflowBridgeControl=workflowBridgeCore.querySelector(workflowBridgeSpec.selector);if(!workflowBridgeControl)throw new Error('Missing core bridge: '+workflowBridgeSpec.name);const workflowBridgeControlledId=workflowBridgeControl.getAttribute('aria-controls');const workflowBridgeControlled=workflowBridgeControlledId?document.getElementById(workflowBridgeControlledId):null;workflowBridgeCore.dataset.workflowBridge=workflowBridgeSpec.name;workflowBridgeCore.dataset.workflowVersion='0';function workflowBridgeSerialize(){const visualNode=workflowBridgeCore.firstElementChild||workflowBridgeCore;const visual=getComputedStyle(visualNode);const outputs=[...workflowBridgeCore.querySelectorAll('output,[role="status"],[aria-live],meter,progress')].map(node=>node.textContent.trim()+'|'+node.getAttribute('aria-valuenow')+'|'+node.getAttribute('value'));const canvas=[...workflowBridgeCore.querySelectorAll('canvas')].map(node=>{try{return node.toDataURL().slice(-160);}catch{return 'canvas-unavailable';}});return JSON.stringify({html:workflowBridgeCore.innerHTML,status:statusOutput.textContent,outputs,canvas,visual:[visual.display,visual.visibility,visual.opacity,visual.transform,visual.filter,visual.backgroundColor,visual.width,visual.height],scroll:workflowBridgeSpec.mode==='scroll'?workflowBridgeControl.scrollTop:null});}let workflowBridgeLastEffect=workflowBridgeSerialize();function workflowBridgeSummary(){const label=(workflowBridgeControl.getAttribute('aria-label')||workflowBridgeControl.textContent||workflowBridgeControl.value||workflowBridgeSpec.name).trim().replace(/\s+/g,' ').slice(0,72);return label+' · Core Version '+workflowBridgeCore.dataset.workflowVersion;}function workflowBridgeCommit(){const effect=workflowBridgeSerialize();if(effect===workflowBridgeLastEffect)return {changed:false,summary:workflowBridgeSummary()};workflowBridgeLastEffect=effect;workflowBridgeCore.dataset.workflowVersion=String(Number(workflowBridgeCore.dataset.workflowVersion||0)+1);return {changed:true,summary:workflowBridgeSummary()};}function workflowBridgeScheduleCommit(){queueMicrotask(workflowBridgeCommit);setTimeout(workflowBridgeCommit,0);}workflowBridgeControl.addEventListener("click",workflowBridgeScheduleCommit);const workflowBridgeStateTargets=new Set(workflowBridgeCore.querySelectorAll('dialog'));if(workflowBridgeControlled&&workflowBridgeCore.contains(workflowBridgeControlled))workflowBridgeStateTargets.add(workflowBridgeControlled);workflowBridgeStateTargets.forEach(target=>['close','cancel','toggle'].forEach(eventName=>target.addEventListener(eventName,workflowBridgeScheduleCommit)));function workflowBridgeActivate(){workflowBridgeControl.focus();workflowBridgeControl.click();const result=workflowBridgeCommit();setTimeout(workflowBridgeCommit,0);return result;}function workflowBridgeReset(){workflowBridgeCore.dataset.workflowVersion='0';workflowBridgeLastEffect=workflowBridgeSerialize();}
const workflowDispatchCore=document.querySelector('#workflowCore');const workflowDispatchForm=document.querySelector('#workflowDispatchForm');const workflowDispatchSelect=document.querySelector('#workflowDispatchActive');const workflowDispatchJobs=new Map([["1",{"label":"Text Editing","amount":12,"priority":"normal","touches":0}],["2",{"label":"Structural Suggestions","amount":21,"priority":"urgent","touches":0}]]);let workflowDispatchSerial=workflowDispatchJobs.size;function workflowDispatchDrive(job,activate=false){workflowDispatchCore.dataset.dispatchPriority=job.priority;workflowDispatchCore.style.setProperty('--dispatch-load',Math.min(.95,.16+job.amount/120));const bridge=activate?workflowBridgeActivate():{changed:false,summary:workflowBridgeSummary()};document.querySelector('#workflowDispatchSummary').textContent=job.label+' · '+job.amount+' item · '+bridge.summary;announce('Current task in the review queue:'+job.label);}function workflowDispatchRender(activeId,activate=false){workflowDispatchSelect.replaceChildren(...[...workflowDispatchJobs].map(([id,job])=>{const option=document.createElement('option');option.value=id;option.textContent=job.label+(job.priority==='urgent'?' · Urgent':'');return option;}));workflowDispatchSelect.value=activeId;workflowDispatchDrive(workflowDispatchJobs.get(activeId),activate);}workflowDispatchForm.addEventListener('submit',event=>{event.preventDefault();const data=new FormData(workflowDispatchForm);const id=String(++workflowDispatchSerial);workflowDispatchJobs.set(id,{label:document.querySelector('#workflowDispatchKind').value,amount:Math.max(1,Number(document.querySelector('#workflowDispatchAmount').value)||1),priority:data.get('workflowPriority'),touches:0});workflowDispatchRender(id,true);});workflowDispatchSelect.addEventListener('change',()=>workflowDispatchDrive(workflowDispatchJobs.get(workflowDispatchSelect.value),true));workflowDispatchCore.addEventListener('focusin',()=>{const job=workflowDispatchJobs.get(workflowDispatchSelect.value);if(!job)return;job.touches+=1;document.querySelector('#workflowDispatchSummary').textContent=job.label+' · '+job.amount+' item · '+workflowBridgeSummary();});workflowDispatchRender('1',false);
workflowBridgeReset();
  </script>
</body>
</html>