Password Strength Meter

<div class="nuda-strength is-good">
  <input type="password" />
  <div class="nuda-strength__bar"><span style="width:75%"></span></div>
  <div class="nuda-strength__label">Strong</div>
</div>

const root  = document.querySelector('.nuda-strength');
const input = root.querySelector('input');
const bar   = root.querySelector('.nuda-strength__bar span');
const label = root.querySelector('.nuda-strength__label');

input.addEventListener('input', () => {
  const v = input.value;
  let score = 0;
  if (v.length > 6) score++;
  if (/[A-Z]/.test(v)) score++;
  if (/\d/.test(v)) score++;
  if (/[^\w\s]/.test(v)) score++;

  const states = [
    { w: 10,  cls: 'is-weak',   text: 'Too weak' },
    { w: 35,  cls: 'is-weak',   text: 'Weak' },
    { w: 60,  cls: 'is-medium', text: 'Okay' },
    { w: 75,  cls: 'is-good',   text: 'Strong' },
    { w: 100, cls: 'is-good',   text: 'Excellent' },
  ];

  const s = states[score];
  bar.style.width = s.w + '%';
  label.textContent = s.text;
  root.classList.remove('is-weak', 'is-medium', 'is-good');
  root.classList.add(s.cls);
});

.nuda-strength {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 280px;
}

.nuda-strength input {
  padding: 10px 12px;
  background: rgba(0,0,0,.3);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  color: #fafafa;
  font-size: 13px;
  outline: none;
  letter-spacing: .04em;
  transition: border-color .2s,box-shadow .25s;
}

.nuda-strength input:focus {
  border-color: #e4ff54;
  box-shadow: 0 0 0 3px rgba(228,255,84,.12);
}

.nuda-strength__bar {
  position: relative;
  height: 4px;
  background: rgba(255,255,255,.06);
  border-radius: 99px;
  overflow: hidden;
}

.nuda-strength__bar span {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: linear-gradient(90deg,#ff5e7a,#ffb45e,#e4ff54,#6ee7b7);
  background-size: 300% 100%;
  animation: _strBg 4s linear infinite;
  border-radius: 99px;
  transition: width .5s cubic-bezier(.16,1,.3,1);
}

.nuda-strength__label {
  font-size: 11px;
  color: #a0a0a8;
  font-weight: 500;
  text-align: right;
}

.nuda-strength.is-weak .nuda-strength__label {
  color: #ff5e7a;
}

.nuda-strength.is-medium .nuda-strength__label {
  color: #ffb45e;
}

.nuda-strength.is-good .nuda-strength__label {
  color: #6ee7b7;
}

@keyframes _strBg {
  to {
    background-position: 300% 0;
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-strength__bar span {
    animation: none;
  }
}