Bootstrap Signup Form with Password Strength Meter — Free Snippet

<div class="container py-5 d-flex justify-content-center">
  <div class="card bspw-card">
    <div class="card-body p-4">
      <h5 class="fw-bold mb-3">Create your password</h5>
      <label class="form-label small fw-semibold">Password</label>
      <input type="password" class="form-control mb-2" id="bspwInput" placeholder="At least 8 characters">

      <div class="bspw-meter mb-2"><div class="bspw-meter-bar" id="bspwBar"></div></div>
      <p class="small fw-semibold mb-3" id="bspwLabel">Enter a password</p>

      <ul class="list-unstyled bspw-rules small">
        <li id="bspwRuleLen">○ At least 8 characters</li>
        <li id="bspwRuleUpper">○ One uppercase letter</li>
        <li id="bspwRuleNum">○ One number</li>
        <li id="bspwRuleSpecial">○ One special character</li>
      </ul>
      <button class="btn btn-dark w-100 fw-bold mt-2" id="bspwSubmit" disabled>Create account</button>
    </div>
  </div>
</div>

.bspw-card { width: 360px; border: 1px solid #eceef1; border-radius: 14px; }
.bspw-meter { height: 6px; background: #eceef1; border-radius: 4px; overflow: hidden; }
.bspw-meter-bar { height: 100%; width: 0%; background: #dc2626; transition: width .2s ease, background .2s ease; }
.bspw-rules li { color: #9ca3af; transition: color .15s; }
.bspw-rules li.bspw-met { color: #16a34a; }

const input = document.getElementById('bspwInput');
const bar = document.getElementById('bspwBar');
const label = document.getElementById('bspwLabel');
const submit = document.getElementById('bspwSubmit');

const rules = {
  len:     { test: v => v.length >= 8,       el: document.getElementById('bspwRuleLen') },
  upper:   { test: v => /[A-Z]/.test(v),      el: document.getElementById('bspwRuleUpper') },
  num:     { test: v => /[0-9]/.test(v),      el: document.getElementById('bspwRuleNum') },
  special: { test: v => /[^A-Za-z0-9]/.test(v), el: document.getElementById('bspwRuleSpecial') },
};

const LEVELS = [
  { pct: 0,   color: '#dc2626', text: 'Enter a password' },
  { pct: 25,  color: '#dc2626', text: 'Weak' },
  { pct: 50,  color: '#f59e0b', text: 'Fair' },
  { pct: 75,  color: '#eab308', text: 'Good' },
  { pct: 100, color: '#16a34a', text: 'Strong' },
];

input.addEventListener('input', () => {
  const v = input.value;
  let met = 0;

  Object.values(rules).forEach(rule => {
    const ok = rule.test(v);
    rule.el.classList.toggle('bspw-met', ok);
    rule.el.textContent = (ok ? '✓ ' : '○ ') + rule.el.textContent.slice(2);
    if (ok) met++;
  });

  const level = v ? LEVELS[met] : LEVELS[0];
  bar.style.width = (v ? met / 4 * 100 : 0) + '%';
  bar.style.background = level.color;
  label.textContent = level.text;
  label.style.color = level.color;

  submit.disabled = met < 4;
});