<!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.moobnn.com</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款进度条按钮.zip
版权申诉
124 浏览量
2022-11-24
12:31:04
上传
评论
收藏 24KB ZIP 举报
JS+CSS3实现18款进度条按钮.zip （15个子文件） 
JS+CSS3实现18款进度条按钮 jiaoben1798 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资源评论
芝麻粒儿
- 粉丝: 6w+
- 资源: 2万+
