How to create an animated Progressbar to inform the strength of the password?

Question

On some sites I’ve seen bars like this, it would be to analyze the security of passwords and size, while the user types the progress bar not only moves, but designs an animation and fill or trim...

With Jquery it would capture the keyup and compare the length of the string, but I’m in doubt how to make the animation fill etc.

I didn’t put code because I haven’t implemented it yet, as I don’t know how to do the animation part.

Answer 1

You can use a method to create a progression through Divs:

function progress(percent, $element, velocity) {
   percent = percent >= 100 ? 100 : percent;
   var progressBarWidth = percent * $element.width() / 100;
   $element.find('div').stop().animate({ width: progressBarWidth }, velocity, "linear").html(percent + "% ");
}

$('input').on('input', function(){
  var value = $(this).val();
  var progressValue = $('#progress div');
  var color, percent = 0;
if(value.length <= 5){
    color = "red";
    percent = 25;
}else if(value.length <= 10){
    color = "yellow";
    percent = 50;
}else{
    color = "#3c948b";
    percent = 100;
}
progress(percent, $('#progress'), 300);
progressValue.css("background", color);
$('#progress').css("border", "1px solid " + color);
})

#progress{
  background: transparent;
  transition: border 0.2s;
  color: #fff;
}
#progress div{
  background: transparent;
  transition: background 0.2s;
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text">
<br/>
<br/>
<div id="progress" >
  <div></div>
</div>

In the example above the slider changes color according to the amount of characters inserted in the text box, the percentage of the slider will animate up to the value. Just put the width desired what the rest it will do. As default is on 100% of the screen.

In function progress(), you specify the percentage, the element that will be the progression and the speed of the animation, respectively.

Answer 2

I would leave to use Javascript when it was really necessary. Animations and changing the appearance of an element can be done only with CSS.

It is possible to use selectors by attribute to apply rules according to the value defined in certain attributes of an element. Thus, you can use any global attribute to set a text to identify the strength of the password (fraca, normal, forte, etc.).

Stylization (including animation) would be done with CSS, based on the text that identifies the password strength. How about using the attribute title for this?

/* Quando o valor do atributo 'title' for 'forte'... */
input[title='forte'] {

    /* ... fique verde. */

}

/* Quando o valor do atributo 'title' for 'fraca'... */
input[title='fraca'] {

  /* ... fique vermelho. */

}

Sounds good, huh?!

Now yes comes the need to use Javascript (or Jquery), and its use will only count the number of characters entered and change the attribute value title. This is because it is not yet possible to make selection by number of characters, otherwise neither Javascript would be necessary.

In the examples below, if the password size is:

• <= 2: The background will turn red, occupying 33% of the width of the element.
• > 2 && < 8: Background will turn yellow, occupying 66% of the element width.
• >= 8: The background will be green, occupying 100% of the element width.

jQuery:

$(function() {
  
  $('input').on('keyup', function() {
    
    // Obtém a quantidade de caracteres do valor inserido no input.
    var length = $(this).val().length;

    // Por padrão, o texto será 'Força da senha', caso a quantidade
    // de caracteres seja menor que 1.
    var title = 'Força da senha';
    if (length > 0) {
      if (length <= 2)
        title = 'fraca';
      
      else if (length > 2 && length < 8)
        title = 'normal';
      
      else 
        title = 'forte';
    }
    
    // Altera o atributo título com a palavra que identifica força da senha.
    $('.password-strength').attr('title', title);
  });
  
});

.password-strength {
  display: block;
  height: 12px;
  position: relative
}

.password-strength::after {
  content: attr(title);
  color: #fff;
  font-size: 10px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  transition: width 200ms ease-in-out;
  text-align: center
}

.password-strength[title='Força da senha']::after {
  background-color: #333;
  width: 100%
}

.password-strength[title='fraca']::after {
  background-color: #e74c3c;
  width: 33%
}

.password-strength[title='normal']::after {
  background-color: #f1c40f;
  width: 66%
}

.password-strength[title='forte']::after {
  background-color: #2ecc71;
  width: 100%
}

input, span { margin: 4px }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type='password' placeholder='Senha' />
<span title='Força da senha' class='password-strength'></span>

Vanillajs:

document.querySelector('input').addEventListener('keyup', function() {

  // Obtém o total de caracteres do valor inserido.
  var length = this.value.length;

  var title = 'Força da senha';
  if (length > 0) {
    if (length <= 2)
      title = 'fraca';
    
   else if (length > 2 && length < 8)
      title = 'normal';
   
    else
      title = 'forte';
  }

  // Altera o atributo 'title' com a palavra que identifica a força da senha.
  document.querySelector('.password-strength').setAttribute('title', title);
}, false);

.password-strength {
  display: block;
  position: relative;
  height: 12px
}

.password-strength::after {
  content: attr(title);
  color: #fff;
  font-size: 10px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  transition: width 200ms ease-in-out;
  text-align: center
}

.password-strength[title='Força da senha']::after {
  background-color: #333;
  width: 100%
}

.password-strength[title='fraca']::after {
  background-color: #e74c3c;
  width: 33%
}

.password-strength[title='normal']::after {
  background-color: #f1c40f;
  width: 66%
}

.password-strength[title='forte']::after {
  background-color: #2ecc71;
  width: 100%
}

input { margin: 4px }

<input type='password' placeholder='Senha' />
<span title='Força da senha' class='password-strength'></span>