jquery实现炫酷加载进度条效果代码-html代码-BFW代码库

jquery实现炫酷加载进度条效果代码

代码语言：html

所属分类：进度条

代码描述：jquery实现炫酷加载进度条效果代码，可以自定义进度和加载完成事件通知。

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        body {
	font-family:helvetica,sans-serif;
	background:#292d33;
	font-weight:bold
}
*,*:after,*:before {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	-o-box-sizing:border-box;
	box-sizing:border-box;
	padding:0;
	margin:0
}
.devbox {
	width:100%;
	margin:100px auto
}
.wrap {
	display:block;
	width:480px;
	margin:0 auto;
	position:relative;
	height:70px;
	background:#1a1e22;
	border-radius:10px;
	box-shadow:inset 0 1px 1px 0 black,0 1px 1px 0 #36393F
}
.progress-wrap {
	display:block;
	width:465px;
	position:absolute;
	top:0;
	left:0;
	padding:8px;
	border-radius:8px
}
.progress {
	display:inline-block;
	margin:0;
	padding-top:18px;
	background:#2e8ffb;
	width:7%;
	height:56px;
	border-radius:8px;
	position:absolute;
	text-align:center;
	background-size:65px 65px;
	background-image:linear-gradient(135deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
	background-image:-webkit-linear-gradient(135deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
	animation:animate-bars 3s linear infinite;
	-webkit-animation:animate-bars 3s linear infinite;
	-moz-animation:animate-bars 3s linear infinite;
	-ms-animation:animate-bars 3s linear infinite;
	-o-animation:animate-bars 3s linear infinite
}
@-webkit-keyframes animate-bars {
	0% {
	background-position:0 0
}
100% {
	background-position:260px 0
}
}@-moz-keyframes animate-bars {
	0% {
	background-position:0 0
}
100% {
	background-position:260px 0
}
}@-ms-keyframes animate-bars {
	0% {
	background-position:0 0
}
100% {
	background-position:260px 0
}
}@-o.........完整代码请登录后点击上方下载按钮下载查看