3
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.
4
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.
Thanks, I’ll try to adapt.. To make an effect to change color would be just change class or color ne.. Thanks, helped!
I will try to make an example that there is color change and I edit the answer, @Leonardovilarinho
@Leonardovilarinho, edited answer. It is a simple example, without much deepening, but illustrates well. And excuse the delay, I was without time.
Thanks a lot, it gave a very good base for me to implement etc and even use as it is
3
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.$(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>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>Renan, became very good, simple and easy to adapt to needs or own logic +1
Browser other questions tagged jquery
You are not signed in. Login or sign up in order to post.
What you want, when you talk about animation, is something like that?
– Samir Braga
Yes, exactly that same, had a cool also that I can’t remember where I had seen that changes color. When this low is red, in the middle orange and full green.
– Leonardo
No, there is not. It was a failure to access the site by mobile, can not remove it.
– Leonardo