如何创建进度条动画
[英]How to create a progress bar animation
问题描述
so I want to create a simple animated progress bar for a password input, the problem that I currently have is that I don' know how to implement animation into my code... I don't know jquery yet so I have to use CSS/JS/HTML5. 
所以我想为密码输入创建一个简单的动画进度条，目前存在的问题是我不知道如何在代码中实现动画...我还不知道jquery，所以我必须使用CSS / JS / HTML5。 I appreciate your help, thanks! 感谢您的帮助，谢谢！
var password = document.getElementById('input'); var feedback = document.getElementById('output'); var progress = document.getElementById('progress'); function checkLength() { var passwordValue = password.value; if (passwordValue.length === 0) { feedback.textContent = 'to short!'; progress.value = 0; } else if (passwordValue.length === 1) { feedback.textContent = 'Poor'; progress.value = 5; } else if (passwordValue.length === 2) { feedback.textContent = 'Poor'; progress.value = 10; } else if (passwordValue.length === 3) { feedback.textContent = 'Poor'; progress.value = 20; } else if (passwordValue.length === 4) { feedback.textContent = 'Better'; progress.value = 30; } else if (passwordValue.length === 5) { feedback.textContent = 'Better'; progress.value = 40; } else if (passwordValue.length === 6) { feedback.textContent = 'Good'; progress.value = 50; } else if (passwordValue.length === 7) { feedback.textContent = 'Good'; progress.value = 60; } else if (passwordValue.length === 8) { feedback.textContent = 'Really Good'; progress.value = 70; } else if (passwordValue.length === 9) { feedback.textContent = 'Perfect'; progress.value = 80; } else if (passwordValue.length >= 10) { feedback.textContent = 'Golden'; progress.value = 100; } } password.addEventListener('keyup', checkLength, false);
* { margin: auto; color: #000; text-align: center; font-family: Verdana, Geneva, sans-serif; } #content { min-height: 990px; } input { margin-top: 30px; background-color: white; } #progress { width: 500px; box-shadow: 0px 18px 20px black; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; background-color: #6F8D96 } #progress::-webkit-progress-bar { background-color: #6F8D96; opacity: 0.7; } #progress::-webkit-progress-value { background-color: red; } #progress::-moz-progress-bar { background-color: red; opacity: 0.7; } #output { color: #fff; }
<!DOCTYPE html> <html> <head> <title>passwordChecker</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="cssjs/passwordChecker.css"> </head> <body> <div id="bgimage"> <div id="content"> <div id="topimage"></div> <h1>enter ur password</h1> <input id="input" type="password" placeholder="let's see..."> <br><br> <progress class='' id='progress' value="0" max="100"></progress> <div id="output">Ready</div> </div> </div> </body> </html>
3 个解决方案
解决方案1
3 已采纳
This css classes should have 这个CSS类应该有
a div with display block, one more div on top, and change the width of the 一个带显示块的div，顶部再增加一个div，然后更改
div so it feels like a progress bar, add css3 animation that will animate div，使其感觉像一个进度条，添加css3动画以进行动画处理
on width change 宽度变化
document.querySelector('.loading-bar').style.width = width + 'px';
.loading-container {
width: 400px;
height: 80px;
background-color: yellow;
}
.loading-bar {
width: 0; // this should be incremented
height: 80px;
background-color: green;
will-change: width;
transition: width 200ms ease in;
}
解决方案2
1 2015-11-21 19:27:59
I suggest you to avoid 我建议你避免
#progress::-webkit-progress-bar
And simply use two div like this: 并像这样简单地使用两个div：
<div class="progress-wrapper">
<div class="progress-wrapper__over"></div>
</div>
with a style that can be something like this: 样式可能是这样的：
.progress-wrapper{
width: 200px;
height: 40px;
background-color: grey;
}
.progress-wrapper__over {
width: 0;
height: 40px;
background-color: red;
will-change: width;
transition: width 100ms ease;
}
and then on input change simply change the width of progress-wrapper__over 然后在输入更改时只需更改progress-wrapper__over的宽度
A tip instead of use 3000 if just use a switch :) and afterall i suggest to avoid javascript animation for any kind of situation that you can handle by using css. 提示，而不是使用3000（如果只是使用一个开关:)，毕竟我建议您避免在使用CSS可以处理的任何情况下使用javascript动画。
解决方案3
0 2015-12-05 09:50:35
This may not be answer to your question, also I am not sure if it is possible to animate the progress using progress tag.But surely it is possible to create & animate the progress bar using div & span,probably which you dont want to use. 这可能不是您的问题的答案，我也不知道是否可以使用progress标签对进度进行动画处理。但是可以肯定的是，可以使用div＆span创建和对进度条进行动画处理，也许您不想使用。 Also I see in one of your comment that you want to learn new,So I modified your the js . 我也在您的评论之一中看到您想学习新知识，因此我修改了js。
var password,feedback;progress ="";
function _checkLength(){
var passwordValue = password.value.length;
switch(passwordValue){
case 0: _updateProgressBar("too short!",0);
break;
case 1: _updateProgressBar("Poor",5);
break;
case 2: _updateProgressBar("Poor",10);
break;
case 3: _updateProgressBar("Poor",20);
break;
case 4: _updateProgressBar("Better",30);
break;
case 5: _updateProgressBar("Better",40);
break;
case 6: _updateProgressBar("Good",60);
break;
case 7: _updateProgressBar("Good",70);
break;
case 8: _updateProgressBar("Really Good",80);
break;
case 9: _updateProgressBar("Perfect",90);
break;
case 10: _updateProgressBar("Golden",100);
break;
}
}
function _updateProgressBar(textContent,value){
feedback.textContent =textContent;
progress.value = value;
}
// This will through an Uncaught TypeError:Cannot read property "addEventListener" of null if this snippet is inside head tag. You can put this script inside body tag
// password.addEventListener('keyup', _checkLength, false);
// Else you can use DOMContentLoaded event to addEventListener to element
document.addEventListener("DOMContentLoaded",function(event){
password = document.getElementById('input');
feedback = document.getElementById('output');
progress = document.getElementById('progress');
password.addEventListener('keyup', _checkLength, false);
})
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.