In some websites I have 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 projects an animation and filling or trim ...
With JQuery I would be capturing the keyup and comparing the length of the string, but I am in doubt about how to do the fill animation etc.
I did not put code, because I did not implement it yet, as I do not know how to do the part of the animation I already decided to ask.
You can use a method to create a progressBar 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><inputtype="text">
<br/>
<br/>
<div id="progress" >
<div></div>
</div> In the above example the bar changes color according to the amount of characters entered in the text box, the percentage of the bar will animate up to the value. Just put the width desired that the rest will do. As default it is at 100% of the screen.
In the progress() function, you specify the percentage, the element that will be the progressBar and the speed of the animation respectively.
I would leave to use Javascript when it really was needed. Animations and changing the appearance of an element can only be done with CSS.
You can use selectors per attribute to apply rules according to the set value attributes of an element. Thus, you can use any global attribute to define text to identify the force of the password ( fraca , normal , forte , etc).
Styling (including animation) would be done with CSS, based on text that identifies the password strength. How about using the title attribute 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. */
}
Looks cool, huh?!
Now, there is a need to use Javascript (or JQuery), and its use is only to count the number of characters entered and to change the title attribute value. This is because it is not yet possible to make selection by amount of characters, otherwise neither Javascript would be necessary.
In the examples below, if the password length is:
<= 2 : The background will be red, taking up 33% of the width of the element. > 2 && < 8 : The background will be yellow, occupying 66% of the width of the element. >= 8 : The background will be green, occupying 100% width of the element.
$(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><inputtype='password'placeholder='Senha'/><spantitle='Forçadasenha'class='password-strength'></span>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>