jQuery完成进度插件Fort js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery完成进度插件Fort js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="gb2312">
<meta name="viewport" content="width=device-width">
<title>jQuery完成进度插件Fort</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/fort.min.css">
<script src="js/fort.min.js"></script>
</head>
<body>
<div class="form-wrapper" >
  <div class="top"><div class="colors"></div></div>
	<h1 style="color: #000; text-align: center;">Fort.js</h1>
	<form name="form" action="#">
		<div class="form">
			<div class="form-item">
				<label for="text">
				<span class="fontawesome-user"></span></label>
				<input type="text" name="text" required placeholder="Name" autocomplete="off">
			</div>
			<div class="form-item">
				<label for="text">
				<span class="fontawesome-user"></span></label>
				<input type="text" name="text" required placeholder="Username" autocomplete="off">
			</div>
			<div class="form-item">
				<label for="password">
				<span class="fontawesome-lock"></span></label>
				<input type="password" name="password" required placeholder="Password" autocomplete="off">
			</div>
			<div class="button-panel">
				<input type="submit" class="button" title="Sign In" value="Test It Out">
				
      </div>
	</div>
</form>
</div>
<script>
solid();
</script>
</body>
</html>

JS代码(fort.min.js):

function solid(){
	function cback(e){
	var t = [];
	for (var n = inputs.length;
	n--;
	){
	if (!inputs[n].value.length) t.push(inputs[n]);
}
var r = t.length;
	var i = inputs.length;
	var s = document.querySelectorAll(".top");
	for (var o = s.length;
	o--;
	){
	s[o].style.width = 100 - r / i * 100 + "%";
}
}
var forms = document.querySelectorAll(".form"),inputs = [];
	for (var i = forms.length;
	i--;
	){
	var els = forms[i].querySelectorAll("input,textarea,select");
	for (var j = els.length;
	j--;
	){
	if (els[j].type != "button" && els[j].type != "submit"){
	inputs.push(els[j]);
	els[j].addEventListener("input",cback,false);
}
}
}
}
function flash(){
	function cback(e){
	var t = [];
	for (var n = inputs.length;
	n--;
	){
	if (!inputs[n].value.length) t.push(inputs[n]);
}
var r = t.length;
	var i = inputs.length;
	var s = document.querySelectorAll(".top");
	for (var o = s.length;
	o--;
	){
	s[o].style.width = 100 - r / i * 100 + "%";
	s[o].style.background = cols[i-r-1];
}
}
var forms = document.querySelectorAll(".form"),inputs = [];
	for (var i = forms.length;
	i--;
	){
	var els = forms[i].querySelectorAll("input,textarea,select");
	for (var j = els.length;
	j--;
	){
	if (els[j].type != "button" && els[j].type != "submit"){
	inputs.push(els[j]);
	els[j].addEventListener("input",cback,false);
}
}
}
var cols = ["#1ABC9C","#EC7063","#3498DB"];
}
function gradient(){
	function cback(e){
	var t = [];
	for (var n = inputs.length;
	n--;
	){
	if (!inputs[n].value.length) t.push(inputs[n]);
}
var r = t.length;
	var i = inputs.length;
	var s = document.querySelectorAll(".top");
	for (var o = s.length;
	o--;
	){
	s[o].style.width = 100 - r / i * 100 + "%";
}
}
var forms = document.querySelectorAll(".form"),inputs = [];
	for (var i = forms.length;
	i--;
	){
	var els = forms[i].querySelectorAll("input,textarea,select");
	for (var j = els.length;
	j--;
	){
	if (els[j].type != "button" && els[j].type != "submit"){
	inputs.push(els[j]);
	els[j].addEventListener("input",cback,false);
}
}
}
}
function sections(){
	function cback(e){
	var t = [];
	for (var n = inputs.length;
	n--;
	){
	if (!inputs[n].value.length) t.push(inputs[n]);
}
var r = t.length;
	var i = inputs.length;
	var s = document.querySelectorAll(".top");
	for (var o = s.length;
	o--;
	){
	s[o].style.width = 100 - r / i * 100 + "%";
}
}
var forms = document.querySelectorAll(".form"),inputs = [];
	for (var i = forms.length;
	i--;
	){
	var els = forms[i].querySelectorAll("input,textarea,select");
	for (var j = els.length;
	j--;
	){
	if (els[j].type != "button" && els[j].type != "submit"){
	inputs.push(els[j]);
	els[j].addEventListener("input",cback,false);
}
}
}
function generateCSSGradient(colours){
	var l = colours.length,i;
	for( i=0;
	i<l;
	i++) colours[i] = colours[i].join(" ");
	return "linear-gradient( to right,"+colours.join(",")+")";
}
var cols = [["#1ABC9C","0%"],["#1ABC9C","33.3%"],["#EC7063","33.3%"],// note same percentage - this gives a crisp change["#EC7063","66.6%"],["#3498DB","66.6%"],["#3498DB","100%"]];
	document.getElementsByClassName('top').innerHTML = '<div class="colors"></div>';
	document.querySelector(".colors").style.background = generateCSSGradient(cols);
	var window_width = window.innerWidth + "px";
	document.querySelector(".colors").style.width = window_width;
}
;

CSS代码(fort.css):

.top{/*background:#009dff;*/
 background:linear-gradient(to right,#009dff 0,#00c8ff 100%);position:fixed;z-index:1031;top:0;left:0;height:4px;transition:all 1s;width:0;}
.colors{width:100%;height:4px;}
.top{overflow:hidden;}

CSS代码(fort.min.css):

.top{background:#009dff;/*background:linear-gradient(to right,#009dff 0,#00c8ff 100%);*/
position:fixed;z-index:1031;top:0;left:0;height:4px;transition:all 1s;width:0}
.colors{width:100%;height:4px;}
.top{overflow:hidden;}

CSS代码(style.css):

*{margin:0;padding:0;box-sizing:border-box;}
body{background:#fff;color:#7b8993;font:300 87.5%/1.5em 'Open Sans',sans-serif;}
.form-wrapper{padding-top:10%;border-radius:2px;margin:50px auto;position:relative;width:375px;}
@media only screenand (max-width:320px){.form-wrapper{padding-top:10%;border-radius:2px;margin:50px auto;position:relative;width:320px;}
}
form{padding:30px 20px 0;}
.form-item{margin-bottom:10px;width:100%;}
.form-item input{border:1px solid #ccc;border-radius:2px;color:#000;font-family:'Open Sans',sans-serif;font-size:1em;height:50px;padding:0 16px;transition:background 0.3s ease-in-out;width:100%;}
.form-item input:focus{outline:none;border-color:#9ecaed;box-shadow:0 0 10px #9ecaed;}
.button-panel{margin:20px 0 0;width:100%;}
.button-panel .button{background:#009dff;border:none;border-radius:2px;color:#fff;cursor:pointer;height:50px;font-family:'Open Sans',sans-serif;font-size:1.2em;letter-spacing:0.05em;text-align:center;text-transform:uppercase;transition:background 0.3s ease-in-out;width:100%;}
.button:hover{background:#00c8ff;}
.cent{text-align:center;color:#000;}
.view{text-align:center;text-decoration:none;color:#7b8993;padding-top:5px;}
.ref{text-align:center;text-decoration:none;color:#7b8993;padding-top:8px;font-size:16px;}
.ref:hover{text-align:center;text-decoration:none;color:#009dff;-webkit-animation:hue 60s infinite linear;padding-top:8px;font-size:16px;}
.head{color:#000;text-align:center;}

附件:下载该文件资源,减少时间成本(增值服务)