jquery+css实现下载进度动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：进度条

代码描述：jquery+css实现下载进度动画效果代码，点击下载按钮开始显示下载进度及动画效果。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <style>
        @import url(https://fonts.googleapis.com/css?family=Nunito:400,700,300);
	body {
	font-family:'Nunito',sans-serif;
	background:#373e46;
}
#loading_line {
	width:0px;
	height:5px;
	background:blue;
}
.buttonContainer {
	position:absolute;
	left:50%;
	top:50%;
	-webkit-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%);
	text-align:center;
	cursor:pointer;
}
.buttonContainer .complete {
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	margin:auto;
	-webkit-transform:scale(1.9);
	transform:scale(1.9);
	color:#f9f9f9;
	-webkit-transition:all .3s ease;
	transition:all .3s ease;
	opacity:0;
}
.buttonContainer .complete.fadein {
	opacity:1;
	-webkit-transform:scale(1.5);
	transform:scale(1.5);
}
.buttonContainer #counter {
	color:#e91d62;
	font-size:19px;
	left:0;
	right:0;
	bottom:20px;
	margin:auto;
	display:none;
	position:absolute;
}
.buttonContainer .ball {
	position:absolute;
	left:0;
	right:0;
	top:-26px;
	margin:auto;
	width:40px;
	height:40px;
	border-radius:40px;
	background-color:#e91d62;
	-webkit-box-shadow:inset 1px 1px 1px 0px rgba(255,255,255,0.54);
	box-shadow:inset 1px 1px 1px 0px rgba(255,255,255,0.54);
	display:none;
}
.buttonContainer:before {
	content:"Download";
	display:block;
	text-transform:uppercase;
	color:#e91d62;
	font-weight:700;
	font-size:13px;
	-webkit-transform:translateY(38px);
	transform:translateY(38px);
	-webkit-transition:all .2s ease;
	transition:all .2s ease;
}
.buttonContainer.active {
	pointer-events:none;
}
.buttonContainer.active:before {
	opacity:0;
}
.buttonContainer.active .ball {
	-webkit-animation:jump 2s cubic-bezier(0.16,0.15,1,0.49) infinite;
	animation:jump 2s cubic-bezier(0.16,0.15,1,0.49) infinite;
}
.buttonContainer.active #button {
	stroke-dashoffset:290;
	width:300px;
	stroke-width:9;
	-webkit-animation:struk 2s cubic-bezier(0.16,0.15,1,0.49) infinite;
	animation:struk 2s cubic-bezier(0.16,0.15,1,0.49) infinite;
}
.buttonContainer #button {
	stroke-dasharray:411;
	stroke-dashoffset:0;
	marker-start:30;
	-webkit-transform-origin:50% 50%;
	transform-origin:50% 50%;
	-webkit-transition:all 0.4s cubic-bezier(0.18,0.89,0.32,1.28);
	transition:all 0.4s cubic-bezier(0.18,0.89,0.32,1.28);
}
@-webkit-keyframes jump {
	0% {
	-webkit-transform:translateY(0%);
	transform:translateY(0%);
}
10% {
	-webkit-transform:translateY(-180%);
	transform:translateY(-180%);
}
18% {
	width:40px;
	height:40px;
}
20% {
	-webkit-transform:translateY(10%);
	transform:translateY(10%);
	width:48px;
	height:32px;
}
22% {
	width:40px;
	height:40px;
}
30% {
	-webkit-transform:translateY(-90%);
	transform:translateY(-90%);
}
38% {
	width:40px;
	height:40px;
}
40% {
	-webkit-transform:translateY(5%);
	transform:translateY(5%);
	width:44px;
	height:36px;
}
42% {
	width:40px;
	height:40px;
}
49% {
	-webkit-transform:translateY(-40%);
	transform:translateY(-40%);
}
57% {
	-webkit-transform:translateY(0%);
	transform:translateY(0%);
}
65% {
	-webkit-transform:translateY(-10%);
	transform:translateY(-10%);
}
70% {
	-webkit-transform:translateY(0%);
	transform:translateY(0%);
}
}@keyframes jump {
	0% {
	-webkit-transform:translateY(0%);
	transform:translateY(0%);
}
10% {
	-webkit-transform:translateY(-180%);
	transform:translateY(-180%);
}
18% {
	width:40px;
	height:40px;
}
20% {
	-webkit-transform:translateY(10%);
	transform:translateY(10%);
	width:48px;
	height:32px;
}
22% {
	width:40px;
	height:40px;
}
30% {
	-webkit-transform:translateY(-90%);
	transform:translateY(-90%);
}
38% {
	width:40px;
	height:40px;
}
40% {
	-webkit-transform:translateY(5%.........完整代码请登录后点击上方下载按钮下载查看