Bootstrap 5 · Intermediate

Profile Completion Meter

A checklist that updates a completion percentage bar as you check items.

Requires Bootstrap 5. Add the CDN tags below to your page (styles in <head>, scripts before </body>). The downloaded file already includes them.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

<div class="card border-0 shadow-sm" style="max-width:320px"><div class="card-body">
  <div class="d-flex justify-content-between align-items-center mb-1"><h6 class="fw-bold mb-0">Profile</h6><span class="badge text-bg-primary" id="pcPct">50%</span></div>
  <div class="progress mb-3" style="height:6px"><div class="progress-bar" id="pcBar" style="width:50%"></div></div>
  <div class="d-grid gap-2 small" id="pcList">
    <label class="d-flex gap-2"><input type="checkbox" checked> Add profile photo</label>
    <label class="d-flex gap-2"><input type="checkbox" checked> Verify email</label>
    <label class="d-flex gap-2"><input type="checkbox"> Connect account</label>
    <label class="d-flex gap-2"><input type="checkbox"> Invite a teammate</label>
  </div>
</div></div>

var boxes=document.querySelectorAll('#pcList input'),bar=document.getElementById('pcBar'),pct=document.getElementById('pcPct');
function upd(){var done=[].filter.call(boxes,function(b){return b.checked}).length,p=Math.round(done/boxes.length*100);bar.style.width=p+'%';pct.textContent=p+'%'}
boxes.forEach(function(b){b.onchange=upd});upd();

Free to use.This component uses Bootstrap 5 (linked above). Copy any file, or download a ready-to-open .html page with the CDN links already included.