3

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.

3
  • 1
    O que você deseja, quando fala em animação, é algo parecido com isso? 27/12/2015 às 1:06
  • Sim, exatamente essa mesmo, tinha una legal também que nao lembro onde tinha visto que muda de cor. Quando esta baixa é vermelha,no médio laranja e cheia verde.
    – Leonardo
    27/12/2015 às 1:11
  • 1
    Não,nao tem. Foi uma falha ao acessar o site pelo celular, não dá pra remover ela.
    – Leonardo
    27/12/2015 às 1:17

2 Respostas 2

4

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.

4
  • Valeu, vou tentar adaptar.. Pra fazer um efeito pra trocar de cor seria so trocar de classe ou de color ne.. Obrigado, ajudou!
    – Leonardo
    27/12/2015 às 1:41
  • 1
    Vou tentar fazer um exemplo que há a troca de cor e edito a resposta, @LeonardoVIlarinho 27/12/2015 às 1:43
  • 1
    @LeonardoVIlarinho, resposta editada. É um exemplo simples, sem muito aprofundamento, mas ilustra bem. E desculpe a demora, estava sem tempo. 27/12/2015 às 2:27
  • Valeu ai, deu uma base muito boa pra mim implementar etc e ate mesmo usar como está
    – Leonardo
    27/12/2015 às 2:36
3

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>

1
  • Renan, ficou muito boa, simples e fácil de adaptar a necessidades ou lógicas próprias +1
    – Syzoth
    23/07/2018 às 12:37

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .