<div class="container py-5 d-flex justify-content-center">
  <div class="card bsfp-card">
    <div class="card-body p-4">
      <div class="d-flex justify-content-between align-items-center mb-1">
        <h6 class="fw-bold mb-0">Complete your profile</h6>
        <span class="small fw-semibold text-muted" id="bsfpPercent">0%</span>
      </div>
      <div class="progress mb-3" style="height:6px;">
        <div class="progress-bar" id="bsfpBar" role="progressbar" style="width:0%"></div>
      </div>

      <div class="mb-2">
        <label class="form-label small fw-semibold mb-1">Full name</label>
        <input type="text" class="form-control form-control-sm bsfp-field" id="bsfpName">
      </div>
      <div class="mb-2">
        <label class="form-label small fw-semibold mb-1">Job title</label>
        <input type="text" class="form-control form-control-sm bsfp-field" id="bsfpTitle">
      </div>
      <div class="mb-2">
        <label class="form-label small fw-semibold mb-1">Company</label>
        <input type="text" class="form-control form-control-sm bsfp-field" id="bsfpCompany">
      </div>
      <div class="mb-2">
        <label class="form-label small fw-semibold mb-1">Short bio</label>
        <textarea class="form-control form-control-sm bsfp-field" id="bsfpBio" rows="2"></textarea>
      </div>
      <div class="mb-3">
        <label class="form-label small fw-semibold mb-1">Profile photo</label>
        <input type="file" class="form-control form-control-sm bsfp-field" id="bsfpPhoto">
      </div>

      <button type="button" class="btn btn-dark btn-sm fw-bold w-100" id="bsfpSubmit" disabled>Save profile</button>
    </div>
  </div>
</div>

.bsfp-card { width: 360px; max-width: 100%; border: 1px solid #eceef1; border-radius: 14px; }
#bsfpBar { transition: width .2s ease; }

const fields = Array.from(document.querySelectorAll('.bsfp-field'));
const bar = document.getElementById('bsfpBar');
const percentEl = document.getElementById('bsfpPercent');
const submitBtn = document.getElementById('bsfpSubmit');

function isFilled(field) {
  if (field.type === 'file') return field.files && field.files.length > 0;
  return field.value.trim() !== '';
}

function update() {
  const filled = fields.filter(isFilled).length;
  const pct = Math.round((filled / fields.length) * 100);
  bar.style.width = pct + '%';
  bar.className = 'progress-bar' + (pct === 100 ? ' bg-success' : '');
  percentEl.textContent = pct + '%';
  submitBtn.disabled = pct < 100;
}

fields.forEach(field => {
  field.addEventListener(field.tagName === 'INPUT' && field.type === 'file' ? 'change' : 'input', update);
});

update();