.password-strength-indicator
{
    border: 1px solid transparent;
    border-radius: 3px;
    display: inline-block;
    min-height: 16px;
    min-width: 10%;
    text-align: center;
    margin: 3px;
    transition: 0.8s;
    color: #fff;
}

.password-strength-indicator.very-weak
{
    background: #cf0000;
    border-color: #a60000;
    width: 15%;
}

.password-strength-indicator.weak
{
    background: red;
    border-color: red;
    width: 25%;
}

.password-strength-indicator.mediocre
{
    background: yellow;
    border-color: yellow;
    width: 35%;
    color: #000;
}

.password-strength-indicator.strong
{
    background: lightgreen;
    border-color: lightgreen;
    width: 45%;
    color: #000;
}

.password-strength-indicator.very-strong
{
    background: green;
    border-color: green;
    width: 55%;
}