Open demo

CSS code

HTML 
<main class="uc">
  <header class="uc-top">
    <a class="uc-logo" href="#"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><rect width="30" height="30" fill="#1a1a1a"/><path d="M6 23h18M8 23V12l7-5 7 5v11M12 23v-6h6v6" fill="none" stroke="#facc15" stroke-width="2.2" stroke-linejoin="round"/></svg>Brickwell <small>Architects</small></a>
    <a class="uc-tel" href="tel:+441174960321">0117 496 0321</a>
  </header>
  <div class="uc-grid">
    <section aria-labelledby="uc-title">
      <p class="uc-kicker">Hard hats on</p>
      <h1 class="uc-title" id="uc-title">Site under construction</h1>
      <p class="uc-lead">We are rebuilding brickwell.co.uk around forty years of schools, libraries and homes. The new site opens in December. Planning something now? Talk to us directly.</p>
      <div class="uc-actions">
        <a class="uc-btn solid" href="mailto:[email protected]"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" aria-hidden="true"><rect x="3" y="5" width="18" height="14"/><path d="m3 6 9 7 9-7"/></svg>[email protected]</a>
        <a class="uc-btn" href="#">Our old portfolio (PDF)</a>
      </div>
    </section>
    <section class="uc-panel" aria-labelledby="uc-prog-lbl">
      <div class="uc-meter" style="--uc-p:72">
        <div class="uc-meter-head"><span id="uc-prog-lbl">Rebuild progress</span><span class="uc-pct" aria-hidden="true"></span></div>
        <div class="uc-bar" role="progressbar" aria-labelledby="uc-prog-lbl" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100"><span class="uc-fill"></span></div>
      </div>
      <ul class="uc-list">
        <li class="done"><span class="uc-mark" aria-hidden="true"></span>Project archive, 212 buildings<b>Done</b></li>
        <li class="done"><span class="uc-mark" aria-hidden="true"></span>Studio and team pages<b>Done</b></li>
        <li class="now"><span class="uc-mark" aria-hidden="true"></span>Case studies with drawings<b>Building</b></li>
        <li><span class="uc-mark" aria-hidden="true"></span>Careers and open roles<b>Next</b></li>
      </ul>
    </section>
  </div>
  <p class="uc-foot">Brickwell Architects Ltd · 14 Wapping Road, Bristol BS1 4RW</p>
</main>
CSS 
/* Under construction page. The percentage and the bar both read one registered custom property, --uc-p,
   so a single CSS animation counts the number up and fills the bar together, with no JavaScript.
   Set the value once, in style="--uc-p:72" on .uc-meter, and match aria-valuenow on the bar. */
@property --uc-p{syntax:"<integer>";inherits:true;initial-value:0}
.uc{--uc-yellow:#facc15;--uc-ink:#1a1a1a;--uc-ink-soft:#3d3517;--uc-panel:#151515;--uc-panel-muted:#a8a29e;
  position:relative;line-height:1.5;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;padding:34px clamp(20px,5vw,60px);
  color:var(--uc-ink);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  background:linear-gradient(rgba(26,26,26,.07) 1px,transparent 1px) 0 0/40px 40px,linear-gradient(90deg,rgba(26,26,26,.07) 1px,transparent 1px) 0 0/40px 40px,var(--uc-yellow)}
.uc::before,.uc::after{content:"";position:absolute;left:0;right:0;height:14px;background:repeating-linear-gradient(-45deg,var(--uc-ink) 0 16px,var(--uc-yellow) 16px 32px)}
.uc::before{top:0}.uc::after{bottom:0}
.uc a{color:inherit}
.uc a:focus-visible{outline:3px solid var(--uc-ink);outline-offset:3px}
.uc-top{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap}
.uc-logo{display:inline-flex;align-items:center;gap:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;text-decoration:none}
.uc-logo small{font-weight:600;letter-spacing:.04em;text-transform:none;font-size:.85rem}
.uc-tel{font-weight:700;text-decoration:none;border-bottom:2px solid currentColor}
.uc-grid{flex:1;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,64px);align-items:center;width:100%;max-width:1120px;margin:0 auto;padding:48px 0}
.uc-kicker{display:inline-block;margin:0 0 18px;padding:4px 10px;font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--uc-yellow);background:var(--uc-ink)}
.uc-title{margin:0 0 20px;font-size:clamp(2.5rem,5.8vw,4.5rem);font-weight:900;line-height:.9;letter-spacing:-.04em;text-transform:uppercase}
.uc-lead{max-width:470px;margin:0 0 30px;font-size:1.08rem;line-height:1.6;color:var(--uc-ink-soft)}
.uc-actions{display:flex;gap:12px;flex-wrap:wrap}
.uc-btn{display:inline-flex;align-items:center;gap:8px;height:50px;padding:0 22px;font-weight:800;text-decoration:none;border:2px solid var(--uc-ink);transition:transform .15s,box-shadow .15s}
.uc-btn.solid{color:var(--uc-yellow);background:var(--uc-ink)}
.uc-btn:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--uc-ink)}
.uc-panel{padding:clamp(22px,3.5vw,34px);color:#f5f5f4;background:var(--uc-panel);box-shadow:10px 10px 0 rgba(26,26,26,.25)}
.uc-meter{animation:uc-count 1.2s cubic-bezier(.2,.7,.2,1) both}
@keyframes uc-count{from{--uc-p:0}}
.uc-meter-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 12px}
.uc-meter-head span:first-child{font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--uc-panel-muted)}
.uc-pct{font-size:clamp(2.4rem,5vw,3.2rem);font-weight:900;line-height:1;color:var(--uc-yellow);font-variant-numeric:tabular-nums;counter-reset:uc var(--uc-p)}
.uc-pct::before{content:counter(uc) "%"}
.uc-bar{height:18px;padding:3px;background:#2a2a2a;border:1px solid #57534e}
.uc-fill{display:block;height:100%;width:calc(var(--uc-p) * 1%);
  background:linear-gradient(-45deg,#eab308 25%,var(--uc-yellow) 25% 50%,#eab308 50% 75%,var(--uc-yellow) 75%) 0 0/24px 24px;animation:uc-stripes .8s linear infinite}
@keyframes uc-stripes{to{background-position:24px 0}}
.uc-list{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:2px}
.uc-list li{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid #2e2e2e;font-size:.95rem}
.uc-list li:first-child{border-top:0}
.uc-list b{margin-left:auto;font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--uc-panel-muted)}
.uc-list .done b{color:var(--uc-yellow)}
.uc-mark{flex:none;width:18px;height:18px;border:2px solid #78716c}
.uc-list .done .uc-mark{background:var(--uc-yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23151515' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat;border-color:var(--uc-yellow)}
.uc-list .now .uc-mark{border-color:var(--uc-yellow);background:linear-gradient(90deg,var(--uc-yellow) 50%,transparent 50%)}
.uc-foot{margin:0;font-size:.85rem;font-weight:600;color:var(--uc-ink-soft)}
@media (max-width:991.98px){.uc-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.uc-meter,.uc-fill{animation:none}.uc-btn{transition:none}.uc-btn:hover{transform:none}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<main class="uc d-flex flex-column">
  <header class="d-flex flex-wrap align-items-center justify-content-between gap-3">
    <a class="uc-logo d-inline-flex align-items-center gap-2 fw-bolder text-uppercase" href="#"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><rect width="30" height="30" fill="#1a1a1a"/><path d="M6 23h18M8 23V12l7-5 7 5v11M12 23v-6h6v6" fill="none" stroke="#facc15" stroke-width="2.2" stroke-linejoin="round"/></svg>Brickwell <small class="text-capitalize">Architects</small></a>
    <a class="uc-tel fw-bold" href="tel:+441174960321">0117 496 0321</a>
  </header>
  <div class="uc-grid row align-items-center flex-grow-1 w-100 mx-auto py-5 gy-5">
    <section class="col-lg-7 px-0" aria-labelledby="uc-title">
      <p class="uc-kicker d-inline-block fw-bolder text-uppercase mb-3">Hard hats on</p>
      <h1 class="uc-title text-uppercase mb-4" id="uc-title">Site under construction</h1>
      <p class="uc-lead mb-4 pb-1">We are rebuilding brickwell.co.uk around forty years of schools, libraries and homes. The new site opens in December. Planning something now? Talk to us directly.</p>
      <div class="d-flex flex-wrap gap-2">
        <a class="btn btn-uc solid" href="mailto:[email protected]"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" aria-hidden="true"><rect x="3" y="5" width="18" height="14"/><path d="m3 6 9 7 9-7"/></svg>[email protected]</a>
        <a class="btn btn-uc" href="#">Our old portfolio (PDF)</a>
      </div>
    </section>
    <section class="col-lg-5 px-0 ps-lg-5" aria-labelledby="uc-prog-lbl">
      <div class="uc-panel" data-bs-theme="dark">
        <div class="uc-meter" style="--uc-p:72">
          <div class="d-flex align-items-baseline justify-content-between gap-3 mb-3"><span class="uc-meter-lbl fw-bold text-uppercase text-body-secondary" id="uc-prog-lbl">Rebuild progress</span><span class="uc-pct" aria-hidden="true"></span></div>
          <div class="progress" role="progressbar" aria-labelledby="uc-prog-lbl" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100"><div class="progress-bar progress-bar-striped progress-bar-animated"></div></div>
        </div>
        <ul class="uc-list list-group list-group-flush mt-4">
          <li class="list-group-item d-flex align-items-center gap-3"><span class="uc-mark done" aria-hidden="true"></span>Project archive, 212 buildings<b class="ms-auto text-uppercase uc-done">Done</b></li>
          <li class="list-group-item d-flex align-items-center gap-3"><span class="uc-mark done" aria-hidden="true"></span>Studio and team pages<b class="ms-auto text-uppercase uc-done">Done</b></li>
          <li class="list-group-item d-flex align-items-center gap-3"><span class="uc-mark now" aria-hidden="true"></span>Case studies with drawings<b class="ms-auto text-uppercase text-body-secondary">Building</b></li>
          <li class="list-group-item d-flex align-items-center gap-3"><span class="uc-mark" aria-hidden="true"></span>Careers and open roles<b class="ms-auto text-uppercase text-body-secondary">Next</b></li>
        </ul>
      </div>
    </section>
  </div>
  <p class="uc-foot small fw-semibold m-0">Brickwell Architects Ltd · 14 Wapping Road, Bristol BS1 4RW</p>
</main>
CSS 
/* Bootstrap .progress with .progress-bar-striped and -animated, a dark-mode panel (data-bs-theme="dark") and a flush .list-group.
   One registered custom property, --uc-p, drives both the counted-up percentage and the bar width. */
@property --uc-p{syntax:"<integer>";inherits:true;initial-value:0}
.uc{--uc-yellow:#facc15;--uc-ink:#1a1a1a;--uc-ink-soft:#3d3517;
  --bs-body-color:var(--uc-ink);--bs-body-font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  position:relative;min-height:100dvh;padding:34px clamp(20px,5vw,60px);color:var(--uc-ink);font-family:var(--bs-body-font-family);
  background:linear-gradient(rgba(26,26,26,.07) 1px,transparent 1px) 0 0/40px 40px,linear-gradient(90deg,rgba(26,26,26,.07) 1px,transparent 1px) 0 0/40px 40px,var(--uc-yellow)}
.uc::before,.uc::after{content:"";position:absolute;left:0;right:0;height:14px;background:repeating-linear-gradient(-45deg,var(--uc-ink) 0 16px,var(--uc-yellow) 16px 32px)}
.uc::before{top:0}.uc::after{bottom:0}
.uc a:not(.btn){color:inherit}
.uc a:focus-visible{outline:3px solid var(--uc-ink);outline-offset:3px;box-shadow:none}
.uc-logo{letter-spacing:.08em;text-decoration:none}
.uc-logo small{font-weight:600;letter-spacing:.04em;font-size:.85rem}
.uc-tel{text-decoration:none;border-bottom:2px solid currentColor}
.uc-grid{max-width:1120px;--bs-gutter-x:clamp(28px,5vw,64px)}
.uc-kicker{padding:4px 10px;font-size:.78rem;letter-spacing:.14em;color:var(--uc-yellow);background:var(--uc-ink)}
.uc-title{font-size:clamp(2.5rem,5.8vw,4.5rem);font-weight:900;line-height:.9;letter-spacing:-.04em}
.uc-lead{max-width:470px;font-size:1.08rem;line-height:1.6;color:var(--uc-ink-soft)}
.uc .btn-uc{--bs-btn-color:var(--uc-ink);--bs-btn-border-color:var(--uc-ink);--bs-btn-border-width:2px;--bs-btn-border-radius:0;--bs-btn-font-weight:800;
  --bs-btn-hover-color:var(--uc-ink);--bs-btn-hover-bg:transparent;--bs-btn-hover-border-color:var(--uc-ink);--bs-btn-active-color:var(--uc-ink);--bs-btn-active-border-color:var(--uc-ink);
  --bs-btn-padding-x:22px;height:50px;display:inline-flex;align-items:center;gap:8px;transition:transform .15s,box-shadow .15s}
.uc .btn-uc.solid{--bs-btn-color:var(--uc-yellow);--bs-btn-bg:var(--uc-ink);--bs-btn-hover-color:var(--uc-yellow);--bs-btn-hover-bg:var(--uc-ink);--bs-btn-active-color:var(--uc-yellow);--bs-btn-active-bg:var(--uc-ink)}
.uc .btn-uc:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--uc-ink)}
.uc-panel{--bs-body-bg:#151515;--bs-body-color:#f5f5f4;--bs-secondary-color:#a8a29e;--bs-border-color:#2e2e2e;
  padding:clamp(22px,3.5vw,34px);color:var(--bs-body-color);background:var(--bs-body-bg);box-shadow:10px 10px 0 rgba(26,26,26,.25)}
.uc-meter{animation:uc-count 1.2s cubic-bezier(.2,.7,.2,1) both}
@keyframes uc-count{from{--uc-p:0}}
.uc-meter-lbl{font-size:.8rem;letter-spacing:.12em}
.uc-pct{font-size:clamp(2.4rem,5vw,3.2rem);font-weight:900;line-height:1;color:var(--uc-yellow);font-variant-numeric:tabular-nums;counter-reset:uc var(--uc-p)}
.uc-pct::before{content:counter(uc) "%"}
.uc .progress{--bs-progress-height:18px;--bs-progress-bg:#2a2a2a;--bs-progress-border-radius:0;--bs-progress-bar-bg:var(--uc-yellow);padding:3px;border:1px solid #57534e}
.uc .progress-bar{--bs-progress-height:24px;width:calc(var(--uc-p) * 1%);transition:none;
  background-image:linear-gradient(-45deg,#eab308 25%,transparent 25% 50%,#eab308 50% 75%,transparent 75%)}
.uc .list-group{--bs-list-group-bg:transparent;--bs-list-group-color:#f5f5f4;--bs-list-group-item-padding-x:0;--bs-list-group-item-padding-y:11px;font-size:.95rem}
.uc-list b{font-size:.72rem;letter-spacing:.1em}
.uc-list .uc-done{color:var(--uc-yellow)}
.uc-foot{color:var(--uc-ink-soft)}
.uc-mark{flex:none;width:18px;height:18px;border:2px solid #78716c}
.uc-mark.done{background:var(--uc-yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23151515' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat;border-color:var(--uc-yellow)}
.uc-mark.now{border-color:var(--uc-yellow);background:linear-gradient(90deg,var(--uc-yellow) 50%,transparent 50%)}
@media (prefers-reduced-motion:reduce){.uc-meter{animation:none}.uc .btn-uc{transition:none}.uc .btn-uc:hover{transform:none}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<main class="relative flex min-h-dvh flex-col bg-uc-yellow bg-[linear-gradient(rgba(26,26,26,.07)_1px,transparent_1px),linear-gradient(90deg,rgba(26,26,26,.07)_1px,transparent_1px)] bg-size-[40px_40px] px-[clamp(20px,5vw,60px)] py-[34px] font-uc text-uc-ink before:absolute before:inset-x-0 before:top-0 before:h-3.5 before:bg-[repeating-linear-gradient(-45deg,#1a1a1a_0_16px,#facc15_16px_32px)] after:absolute after:inset-x-0 after:bottom-0 after:h-3.5 after:bg-[repeating-linear-gradient(-45deg,#1a1a1a_0_16px,#facc15_16px_32px)]">
  <header class="flex flex-wrap items-center justify-between gap-x-6 gap-y-3">
    <a class="inline-flex items-center gap-2.5 font-black tracking-[.08em] uppercase focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-uc-ink" href="#"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><rect width="30" height="30" fill="#1a1a1a"/><path d="M6 23h18M8 23V12l7-5 7 5v11M12 23v-6h6v6" fill="none" stroke="#facc15" stroke-width="2.2" stroke-linejoin="round"/></svg>Brickwell <small class="text-[.85rem] font-semibold tracking-[.04em] normal-case">Architects</small></a>
    <a class="border-b-2 border-current font-bold focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-uc-ink" href="tel:+441174960321">0117 496 0321</a>
  </header>
  <div class="mx-auto grid w-full max-w-[1120px] flex-1 grid-cols-1 items-center gap-[clamp(28px,5vw,64px)] py-12 min-[992px]:grid-cols-[minmax(0,7fr)_minmax(0,5fr)]">
    <section aria-labelledby="uc-title">
      <p class="mb-[18px] inline-block bg-uc-ink px-2.5 py-1 text-[.78rem] font-extrabold tracking-[.14em] text-uc-yellow uppercase">Hard hats on</p>
      <h1 class="mb-5 text-[clamp(2.5rem,5.8vw,4.5rem)] leading-[.9] font-black tracking-[-.04em] uppercase" id="uc-title">Site under construction</h1>
      <p class="mb-[30px] max-w-[470px] text-[1.08rem] leading-[1.6] text-uc-ink-soft">We are rebuilding brickwell.co.uk around forty years of schools, libraries and homes. The new site opens in December. Planning something now? Talk to us directly.</p>
      <div class="flex flex-wrap gap-3">
        <a class="inline-flex h-[50px] items-center gap-2 border-2 border-uc-ink bg-uc-ink px-[22px] font-extrabold text-uc-yellow transition-[translate,box-shadow] duration-150 hover:-translate-0.5 hover:shadow-[4px_4px_0_#1a1a1a] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-uc-ink motion-reduce:transition-none motion-reduce:hover:translate-0" href="mailto:[email protected]"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" aria-hidden="true"><rect x="3" y="5" width="18" height="14"/><path d="m3 6 9 7 9-7"/></svg>[email protected]</a>
        <a class="inline-flex h-[50px] items-center gap-2 border-2 border-uc-ink px-[22px] font-extrabold transition-[translate,box-shadow] duration-150 hover:-translate-0.5 hover:shadow-[4px_4px_0_#1a1a1a] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-uc-ink motion-reduce:transition-none motion-reduce:hover:translate-0" href="#">Our old portfolio (PDF)</a>
      </div>
    </section>
    <section class="bg-uc-panel p-[clamp(22px,3.5vw,34px)] text-stone-100 shadow-[10px_10px_0_rgba(26,26,26,.25)]" aria-labelledby="uc-prog-lbl">
      <div class="animate-uc-count motion-reduce:animate-none" style="--uc-p:72">
        <div class="mb-3 flex items-baseline justify-between gap-3"><span class="text-[.8rem] font-bold tracking-[.12em] text-uc-panel-muted uppercase" id="uc-prog-lbl">Rebuild progress</span><span class="text-[clamp(2.4rem,5vw,3.2rem)] leading-none font-black text-uc-yellow tabular-nums [counter-reset:uc_var(--uc-p)] before:content-[counter(uc)_'%']" aria-hidden="true"></span></div>
        <div class="h-[18px] border border-stone-600 bg-[#2a2a2a] p-[3px]" role="progressbar" aria-labelledby="uc-prog-lbl" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100"><span class="block h-full w-[calc(var(--uc-p)*1%)] animate-uc-stripes bg-[linear-gradient(-45deg,#eab308_25%,#facc15_25%_50%,#eab308_50%_75%,#facc15_75%)] bg-size-[24px_24px] motion-reduce:animate-none"></span></div>
      </div>
      <ul class="mt-[26px] grid gap-0.5 divide-y divide-[#2e2e2e] text-[.95rem]">
        <li class="flex items-center gap-3 py-[11px]"><span class="grid size-[18px] flex-none place-items-center border-2 border-uc-yellow bg-uc-yellow text-uc-panel" aria-hidden="true"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12.5 4.5 4.5L19 7.5"/></svg></span>Project archive, 212 buildings<b class="ml-auto text-[.72rem] font-extrabold tracking-[.1em] text-uc-yellow uppercase">Done</b></li>
        <li class="flex items-center gap-3 py-[11px]"><span class="grid size-[18px] flex-none place-items-center border-2 border-uc-yellow bg-uc-yellow text-uc-panel" aria-hidden="true"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12.5 4.5 4.5L19 7.5"/></svg></span>Studio and team pages<b class="ml-auto text-[.72rem] font-extrabold tracking-[.1em] text-uc-yellow uppercase">Done</b></li>
        <li class="flex items-center gap-3 py-[11px]"><span class="size-[18px] flex-none border-2 border-uc-yellow bg-[linear-gradient(90deg,#facc15_50%,transparent_50%)]" aria-hidden="true"></span>Case studies with drawings<b class="ml-auto text-[.72rem] font-extrabold tracking-[.1em] text-uc-panel-muted uppercase">Building</b></li>
        <li class="flex items-center gap-3 py-[11px]"><span class="size-[18px] flex-none border-2 border-stone-500" aria-hidden="true"></span>Careers and open roles<b class="ml-auto text-[.72rem] font-extrabold tracking-[.1em] text-uc-panel-muted uppercase">Next</b></li>
      </ul>
    </section>
  </div>
  <p class="text-[.85rem] font-semibold text-uc-ink-soft">Brickwell Architects Ltd · 14 Wapping Road, Bristol BS1 4RW</p>
</main>
CSS 
/* One registered custom property, --uc-p, drives both the counted-up percentage and the bar width. */
@property --uc-p { syntax: "<integer>"; inherits: true; initial-value: 0; }
@theme {
  --color-uc-yellow: #facc15;
  --color-uc-ink: #1a1a1a;
  --color-uc-ink-soft: #3d3517;
  --color-uc-panel: #151515;
  --color-uc-panel-muted: #a8a29e;
  --font-uc: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --animate-uc-count: uc-count 1.2s cubic-bezier(.2,.7,.2,1) both;
  --animate-uc-stripes: uc-stripes .8s linear infinite;
  @keyframes uc-count { from { --uc-p: 0; } }
  @keyframes uc-stripes { to { background-position: 24px 0; } }
}

About this set

A bold under construction page on safety yellow with hazard tape along the top and bottom edges and a faint blueprint grid. The demo is an architecture practice rebuilding its site: a Hard hats on tag, a heavy uppercase headline, a short paragraph with the reopening month, and two buttons, one to email the studio and one to the old portfolio. Beside it, a dark panel shows the rebuild progress as a large percentage over a striped bar, followed by a checklist of site sections marked Done, Building and Next. Use it when a site is being replaced and visitors still need a way to reach you. There is no JavaScript. The percentage and the bar both read one registered custom property, –uc-p, set once in the markup, and a single CSS animation counts the number up from zero while the bar fills beside it. The number is drawn with a CSS counter and hidden from screen readers, which get the real value from role=”progressbar” and aria-valuenow. The stripes move with a background-position animation, and both animations stop under reduced motion.

What’s included

  • Hazard tape edges and blueprint grid drawn with CSS gradients
  • Percentage counts up and the bar fills from one @property value
  • role="progressbar" with aria-valuenow for the real figure
  • Section checklist marked Done, Building and Next
  • No JavaScript; Bootstrap version uses .progress-bar-striped and a dark data-bs-theme panel

Accessibility

The bar has role="progressbar" with aria-valuenow, aria-valuemin and aria-valuemax, named by the Rebuild progress label; the animated percentage is aria-hidden so it is not read twice. Checklist states are written as text, and the tick marks are decorative. Links and buttons show a 3px black focus outline on the yellow page. The count-up, the moving stripes and the button lift are all removed under prefers-reduced-motion.

Customise it

Set the progress in one place, style="--uc-p:72" on the meter, and keep aria-valuenow in step. Colours are --uc-yellow, --uc-ink and --uc-panel on .uc, or the --color-uc-* theme colours in Tailwind; the tape width is the 16px step in the repeating-linear-gradient.