Q: Como criar uma ProgressBar animada para informar a força da senha? Em alguns sites já vi barras como essa, seria para analisar a segurança de senhas e tamanho, enquanto o usuário digita a barra de progresso não apenas movimenta, mas projeta uma animação e enchimento ou caimento...
Com JQuery seria capturar o keyup e ir comparando o length da string, mas estou em dúvida de como fazer a animação de preenchimento etc.
Não coloquei código, pois não implementei ainda, como não sei fazer a parte da animação já resolvi perguntar.

A: Você pode usar um método para se criar uma progressBar atráves de 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>


No exemplo acima a barra muda de cor de acordo com a quantidade de caracteres inserida na caixa de texto, a porcentagem da barra se animará até o valor. Basta colocar o width desejado que o resto ele fará. Como de padrão está em 100% da tela.
Na função progress(), você especifica a porcentagem, o elemento que será a progressBar e a velocidade da animação, respectivamente.

A: Eu deixaria para usar Javascript quando realmente fosse necessário. Animações e alteração da aparência de um elemento podem ser feitas somente com CSS.
É possível usar seletores por atributo para aplicar regras de acordo com o valor definido em determinados atributos de um elemento. Assim, você pode usar qualquer atributo global para definir um texto para identificar a força da senha (fraca, normal, forte, etc).
A estilização (inclusive a animação) seria feita com CSS, baseando-se no texto que identifica a força de senha. Que tal usar o atributo title para isto?
/* 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. */

}

Parece legal, huh?!
Agora sim vem a necessidade de usar Javascript (ou JQuery), e seu uso será somente para contar a quantidade de caracteres inseridos e alterar o valor atributo title. Isto porque ainda não é possível fazer seleção por quantidade de caracteres, do contrário nem Javascript seria necessário.
Nos exemplos abaixo, se o tamanho da senha for:


*

*<= 2: O background ficará vermelho, ocupando 33% de largura do elemento.

*> 2 && < 8: O background ficará amarelo, ocupando 66% de largura do elemento.

*>= 8: O background ficará verde, ocupando 100% de largura do elemento.


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>


