Voortgang die eindigt met een vlag Nieuw

<!-- Voortgang die eindigt met een vlag · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie -->
<div class="jouw-container">
<div class="k7f">
  <div class="k7f__card">
    <p class="k7f__h">Je webshop klaarzetten</p>
    <p class="k7f__step" aria-live="polite">Stap 1 van 4: logo toevoegen</p>
    <div class="k7f__track" role="progressbar" aria-label="Webshop klaarzetten" aria-valuemin="0" aria-valuemax="4" aria-valuenow="0" aria-valuetext="0 van 4 stappen klaar">
      <span class="k7f__line"><span class="k7f__fill"></span><span class="k7f__dot" style="--f:.25"></span><span class="k7f__dot" style="--f:.5"></span><span class="k7f__dot" style="--f:.75"></span></span>
      <span class="k7f__pole" aria-hidden="true"><span class="k7f__flag"></span><span class="k7f__ray" style="--a:-60deg"></span><span class="k7f__ray" style="--a:-20deg"></span><span class="k7f__ray" style="--a:20deg"></span><span class="k7f__ray" style="--a:60deg"></span><span class="k7f__ray" style="--a:100deg"></span></span>
    </div>
    <button class="k7f__btn" type="button">Stap afronden</button>
  </div>
</div>
</div>

/* Voortgang die eindigt met een vlag · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie */
.k7f{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;box-sizing:border-box;font-family:'Switzer',system-ui,sans-serif;color:#0a0a0a;text-align:left;padding:12px}
.k7f *{box-sizing:border-box}
.k7f__card{width:100%;max-width:340px;background:#fff;border:1px solid rgba(10,10,10,.14);border-radius:8px;padding:14px}
.k7f__h{margin:0 0 3px;font-size:15px;font-weight:700}
.k7f__step{margin:0;min-height:18px;font-size:13px;color:#4d4d4d}
.k7f__track{position:relative;height:56px;margin:8px 0 12px}
.k7f__line{position:absolute;left:0;right:40px;bottom:8px;height:4px;background:#e6e3de;border-radius:2px}
.k7f__fill{position:absolute;left:0;top:0;bottom:0;width:0;background:#F5480F;border-radius:2px;transition:width .5s cubic-bezier(.4,1.2,.5,1)}
.k7f__dot{position:absolute;top:50%;left:calc(var(--f) * 100%);width:12px;height:12px;margin:-6px 0 0 -6px;border:2px solid #c9c4bc;border-radius:50%;background:#fff;transition:background-color .25s,border-color .25s,transform .25s}
.k7f__dot.is-on{border-color:#0a0a0a;background:#0a0a0a;transform:scale(1.15)}
.k7f__pole{position:absolute;right:38px;bottom:4px;width:3px;height:52px;background:#0a0a0a;border-radius:2px}
.k7f__flag{position:absolute;left:3px;top:2px;width:30px;height:18px;background:#c9c4bc;clip-path:polygon(0 0,100% 0,80% 50%,100% 100%,0 100%);transform-origin:0 50%;transform:translateY(28px) scaleX(.35);transition:transform .9s cubic-bezier(.3,1.3,.5,1),background-color .4s}
.k7f.is-done .k7f__flag{background:#F5480F;transform:none;animation:k7f-wave .9s .85s ease-in-out 2}
@keyframes k7f-wave{25%{transform:skewY(5deg) scaleX(.94)}75%{transform:skewY(-4deg)}}
.k7f__ray{position:absolute;left:18px;top:11px;width:2px;height:7px;background:#0a0a0a;border-radius:1px;opacity:0;transform:rotate(var(--a)) translateY(-14px)}
.k7f.is-done .k7f__ray{animation:k7f-ray .6s .9s ease-out}
@keyframes k7f-ray{0%{opacity:0;transform:rotate(var(--a)) translateY(-10px) scaleY(.3)}40%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateY(-22px) scaleY(1)}}
.k7f__btn{height:34px;padding:0 14px;border:0;border-radius:4px;background:#0a0a0a;color:#fff;font:600 13px/1 'Switzer',system-ui,sans-serif;cursor:pointer;transition:background-color .15s}
.k7f__btn:hover{background:#333}
.k7f__btn:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.k7f__fill,.k7f__dot,.k7f__flag{transition:none}.k7f.is-done .k7f__flag,.k7f.is-done .k7f__ray{animation:none}}

// Voortgang die eindigt met een vlag · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie
// root = het element waarin de HTML staat
function init(root){
var w = root.querySelector('.k7f'); if (!w) return;
    var tr = w.querySelector('.k7f__track'), fill = w.querySelector('.k7f__fill'), dots = w.querySelectorAll('.k7f__dot'), stp = w.querySelector('.k7f__step'), btn = w.querySelector('.k7f__btn');
    var S = ['logo toevoegen', 'eerste product plaatsen', 'iDEAL koppelen', 'live zetten'], n = 0;
    function draw() {
      fill.style.width = (n / 4 * 100) + '%';
      dots.forEach(function (d, i) { d.classList.toggle('is-on', i < n); });
      tr.setAttribute('aria-valuenow', n); tr.setAttribute('aria-valuetext', n + ' van 4 stappen klaar');
      w.classList.toggle('is-done', n === 4);
      stp.textContent = n < 4 ? 'Stap ' + (n + 1) + ' van 4: ' + S[n] : 'Klaar. Je winkel staat live op bakkerijjansen.nl.';
      btn.textContent = n < 4 ? 'Stap afronden' : 'Opnieuw bekijken';
    }
    btn.addEventListener('click', function () { n = n < 4 ? n + 1 : 0; draw(); });
    draw();
}
init(document.querySelector('.jouw-container'));