var commonPasswords = new Array('password', 'pass', '1234', '1246');

var numbers = "0123456789";
var lowercase = "abcdefghijklmnopqrstuvwxyz";
var uppercase = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var punctuation = "!.@$£#*()%~<>{}[]";

function checkPassword(password) {

var combinations = 0;

if (contains(password, numbers) > 0) {
combinations += 10;
}

if (contains(password, lowercase) > 0) {
combinations += 10;
}

if (contains(password, uppercase) > 0) {
combinations += 10;
}

if (contains(password, punctuation) > 0) {
combinations += punctuation.length;
}


var totalCombinations = Math.pow(combinations, password.length);


if (isCommonPassword(password)) {
totalCombinations = 75000 // about the size of the dictionary
}


var timeInSeconds = (totalCombinations / 400) / 2;


var timeInDays = timeInSeconds / 86400


var lifetime = 365;


var percentage = timeInDays / lifetime;

var friendlyPercentage = cap(Math.round(percentage * 100), 100);
if (totalCombinations != 75000 && friendlyPercentage < (password.length * 3)) {
friendlyPercentage += password.length * 3;
}

var progressBar = document.getElementById("progressBar");
progressBar.style.width = friendlyPercentage + "%";

if (percentage > 1) {
// strong password
progressBar.style.backgroundColor = "#3bce08";
return;
}

if (percentage > 0.5) {
// reasonable password
progressBar.style.backgroundColor = "#ffd801";
return;
}

if (percentage > 0.10) {
// weak password
progressBar.style.backgroundColor = "orange";
return;
}

if (percentage <= 0.10) {
// weak password
progressBar.style.backgroundColor = "red";
return;
}


}

function cap(number, max) {
if (number > max) {
return max;
} else {
return number;
}
}

function isCommonPassword(password) {

for (i = 0; i < commonPasswords.length; i++) {
var commonPassword = commonPasswords[i];
if (password == commonPassword) {
return true;
}
}

return false;

}

function contains(password, validChars) {

count = 0;

for (i = 0; i < password.length; i++) {
var char = password.charAt(i);
if (validChars.indexOf(char) > -1) {
count++;
}
}

return count;
}

<table>
<tr>
<td>Password:</td>
<td><input type="text" onKeyUp="checkPassword(this.value)"/></td>
<td>
<div style="border: 1px solid gray; width: 100px;">
<div id="progressBar"
style="font-size: 1px; height: 20px; width: 0px; border: 1px solid white;">
</div>
</div>
</td>
</tr>
</table>

var progressBar = document.getElementById("progressBar");
progressBar.style.width = friendlyPercentage + "%";

var progressBar = document.getElementById("progressBar");

if (friendlyPercentage > 100) {
friendlyPercentage = 100;
}
progressBar.style.width = friendlyPercentage + "%";