.password-strength {
  padding: 12px 0 0;
  position: relative;
}

.password-strength::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background-color: #DDDDDD;
}

.password-strength::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 6px;
    background-color: #FFFFFF;
    transition: width .3s cubic-bezier(.1, .6, .45, .94),background-color .3s cubic-bezier(.1, .6, .45, .94);
}

.password-strength[data-strength="invalid"] {
  color: #D9534F;
}

.password-strength[data-strength="invalid"]::after {
    background-color: #D9534F;
    width: 20%
}

.password-strength[data-strength="poor"] {
  color: #888888;
}

.password-strength[data-strength="poor"]::after {
    background-color: #f09321;
    width: 50%;
}

.password-strength[data-strength="ok"] {
  color: #888888;
}

.password-strength[data-strength="ok"]::after {
    background-color: #5BC0DE;
    width: 75%;
}

.password-strength[data-strength="good"] {
  color: #5CB85C;
}

.password-strength[data-strength="good"]::after {
    background-color: #5CB85C;
    width: 100%;
}