<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="gb2312" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS+CSS3实现18款进度条按钮</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/modernizr.custom.js"></script>
</head>
<body>
<div class="container">
<!-- Top Navigation -->
<header>
<h1>JS+CSS3实现18款进度条按钮<span>www.jb51.net/jiaoben/</span></h1>
</header>
<div class="wrapper">
<section>
<h2>fill horizontal</h2>
<button class="progress-button" data-style="fill" data-horizontal>Submit</button>
</section>
<section>
<h2>fill vertical</h2>
<button class="progress-button" data-style="fill" data-vertical>Submit</button>
</section>
<section>
<h2>shrink horizontal</h2>
<button class="progress-button" data-style="shrink" data-horizontal>Submit</button>
</section>
<section>
<h2>shrink vertical</h2>
<button class="progress-button" data-style="shrink" data-vertical>Submit</button>
</section>
</div>
<div class="wrapper">
<section>
<h2>rotate-angle-bottom <br/>perspective</h2>
<button class="progress-button" data-style="rotate-angle-bottom" data-perspective data-horizontal>Submit</button>
</section>
<section>
<h2>rotate-angle-top <br/>perspective</h2>
<button class="progress-button" data-style="rotate-angle-top" data-perspective data-horizontal>Submit</button>
</section>
<section>
<h2>rotate-angle-left <br/>perspective</h2>
<button class="progress-button" data-style="rotate-angle-left" data-perspective data-vertical>Submit</button>
</section>
<section>
<h2>rotate-angle-right <br/>perspective</h2>
<button class="progress-button" data-style="rotate-angle-right" data-perspective data-vertical>Submit</button>
</section>
</div>
<div class="wrapper">
<section>
<h2>rotate-side-down <br/>perspective</h2>
<button class="progress-button" data-style="rotate-side-down" data-perspective data-horizontal>Submit</button>
</section>
<section>
<h2>rotate-side-up <br/>perspective</h2>
<button class="progress-button" data-style="rotate-side-up" data-perspective data-horizontal>Submit</button>
</section>
<section>
<h2>rotate-side-left <br/>perspective</h2>
<button class="progress-button" data-style="rotate-side-left" data-perspective data-vertical>Submit</button>
</section>
<section>
<h2>rotate-side-right <br/>perspective</h2>
<button class="progress-button" data-style="rotate-side-right" data-perspective data-vertical>Submit</button>
</section>
</div>
<div class="wrapper">
<section>
<h2>rotate-back <br/>perspective</h2>
<button class="progress-button" data-style="rotate-back" data-perspective data-horizontal>Submit</button>
</section>
<section>
<h2>flip-open <br/>perspective</h2>
<button class="progress-button" data-style="flip-open" data-perspective data-horizontal>Submit</button>
</section>
<section>
<h2>slide-down <br/>horizontal</h2>
<button class="progress-button" data-style="slide-down" data-horizontal>Submit</button>
</section>
<section>
<h2>move-up <br/>horizontal</h2>
<button class="progress-button" data-style="move-up" data-horizontal>Submit</button>
</section>
</div>
<div class="wrapper">
<section>
<h2>top-line <br/>horizontal</h2>
<button class="progress-button" data-style="top-line" data-horizontal>Submit</button>
</section>
<section>
<h2>lateral-lines <br/>vertical</h2>
<button class="progress-button" data-style="lateral-lines" data-vertical>Submit</button>
</section>
<!--section>
<h2>center-line <br/>horizontal</h2>
<button class="progress-button" data-style="center-line" data-horizontal>Submit</button>
</section-->
</div>
</div><!-- /container -->
<script src="js/classie.js"></script>
<script src="js/progressButton.js"></script>
<script>
[].slice.call( document.querySelectorAll( 'button.progress-button' ) ).forEach( function( bttn ) {
new ProgressButton( bttn, {
callback : function( instance ) {
var progress = 0,
interval = setInterval( function() {
progress = Math.min( progress + Math.random() * 0.1, 1 );
instance._setProgress( progress );
if( progress === 1 ) {
instance._stop(1);
clearInterval( interval );
}
}, 200 );
}
} );
} );
</script>
</body>
</html>
JS+CSS3实现18款不同展示效果的3D立体进度条按钮.zip （15个子文件） 
132689902009189711 css 
demo.css 3KB normalize.css 2KB component.css 14KB fonts icomoon icomoon.woff 1KB
icomoon.svg 743B icomoon.eot 1KB icomoon.ttf 980B codropsicons codropsicons.woff 2KB codropsicons.svg 4KB codropsicons.ttf 2KB codropsicons.eot 2KB
index.html 5KB js modernizr.custom.js 9KB classie.js 2KB progressButton.js 7KB资源评论
