How to make use of it:

1. Import the stylesheet jquery.password-indicator.css and JavaScript jquery.password-indicator.js into the HTML web page.

<link rel="stylesheet" href="/path/to/jquery.password-indicator.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery.password-indicator.js"></script>

2. Attach the Password Strength Indicator to a password input field you specify.

<input type="password" id="password" />

$(function() {
  $("#password").PasswordIndicator();
});

3. Override the default password strength algorithm:

$("#password").PasswordIndicator({
  points: {
    forEachCharacter: 1,
    forEachSpace: 1,
    containsLowercaseLetter: 2,
    containsUppercaseLetter: 2,
    containsNumber: 4,
    containsSymbol: 5
  }
});

4. Determine the password strength you contemplate secure.

$("#password").PasswordIndicator({
  secureStrength: 30
});

5. Customize the suggestions messages & CSS classes:

$("#password").PasswordIndicator({
  strengthClassNames: [{
    name: "very-weak",
    text: "Password strength : very weak"
  }, {
    name: "weak",
    text: "Password strength : weak"
  }, {
    name: "mediocre",
    text: "Password strength : mediocre"
  }, {
    name: "strong",
    text: "Password strength : strong"
  }, {
    name: "awesome",
    text: "Password strength : Awesome"
  }]
});

6. Customize the looks of the password strength indicator.

$("#password").PasswordIndicator({

  // place the indicator in another element
  $indicator: undefined,

  // CSS class
  indicatorClassName: "password-strength-indicator",

  // CSS DISPLAY property
  indicatorDisplayType: "inline-block",

  // CSS properties
  cssProperties: {"float": "right", "font-size": "13px"},
  
});

Minimal Password Strength Indicator In jQuery, password indicator Plugin/Github, password strength checker javascript code, password progress bar javascript

See Demo And Download