src/components/ui/Progress.astro
---
// Progress, recovered from blurr-components.pages.dev
---
<div class="preview-wrapper--centered"> <div style="display:flex;flex-direction:column;gap:2rem;width:100%;max-width:420px"> <div class="pr pr--md" data-component="progress-bar"><div class="pr__meta"><span class="pr__label">Campagne voortgang</span><span class="pr__value">72%</span></div><div class="pr__track" role="progressbar" aria-valuenow="72" aria-valuemax="100" aria-label="Campagne voortgang"><div class="pr__fill pr__fill--accent pr__fill--animated" style="--pct:72%"></div></div></div> <div class="pr pr--sm" data-component="progress-bar"><div class="pr__meta"><span class="pr__label">Budget verbruikt</span><span class="pr__value">45%</span></div><div class="pr__track" role="progressbar" aria-valuenow="45" aria-valuemax="100" aria-label="Budget verbruikt"><div class="pr__fill pr__fill--accent pr__fill--animated" style="--pct:45%"></div></div></div> <div class="pr pr--lg" data-component="progress-bar"><div class="pr__meta"><span class="pr__value">91%</span></div><div class="pr__track" role="progressbar" aria-valuenow="91" aria-valuemax="100"><div class="pr__fill pr__fill--accent pr__fill--animated" style="--pct:91%"></div></div></div> <div style="display:flex;gap:2rem;justify-content:center"> <div class="pr pr--md" data-component="progress-bar"><div class="pr__meta"><span class="pr__label">72%</span><span class="pr__value">72%</span></div><div class="pr__track" role="progressbar" aria-valuenow="72" aria-valuemax="100" aria-label="72%"><div class="pr__fill pr__fill--circle pr__fill--animated" style="--pct:72%"></div></div></div> <div class="pr pr--md" data-component="progress-bar"><div class="pr__meta"><span class="pr__label">45%</span><span class="pr__value">45%</span></div><div class="pr__track" role="progressbar" aria-valuenow="45" aria-valuemax="100" aria-label="45%"><div class="pr__fill pr__fill--circle pr__fill--animated" style="--pct:45%"></div></div></div> <div class="pr pr--md" data-component="progress-bar"><div class="pr__meta"><span class="pr__label">91%</span><span class="pr__value">91%</span></div><div class="pr__track" role="progressbar" aria-valuenow="91" aria-valuemax="100" aria-label="91%"><div class="pr__fill pr__fill--circle pr__fill--animated" style="--pct:91%"></div></div></div> </div> </div> </div>
<style>
,:before,:after{box-sizing:border-box;margin:0;padding:0}
.preview-wrapper--centered{display:flex;align-items:center;justify-content:center;min-height:200px;padding:2rem;background:#f9f9fb}
</style>