![[php框架] Smarty基础商品教程 Smarty入门教程 Smarty框架教程 共10课](https://jy.tp.yuanmeng.life/uploads/images/20210319/f47dc487eb949895833cd962fddc6a8b.jpg)
附件
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基于HTML5 SVG的jQuery圆形进度条动画特效</title>
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" href="css/prelude.css">
<link rel="stylesheet" href="css/rainbow.css">
<link rel="stylesheet" href="css/progress.css">
<style type="text/css">
.demo-section{
width: 100%;
}
.pie_progress {
width: 160px;
margin: 10px auto;
}
@media all and (max-width: 768px) {
.pie_progress {
width: 80%;
max-width: 300px;
}
}
</style>
<!--[if IE]>
<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<div class="htmleaf-container">
<header class="htmleaf-header bgcolor-10">
<h1>基于HTML5 SVG的jQuery圆形进度条动画特效 <span>A jQuery plugin that animate the pie progress</span></h1>
</header>
<section class="demo-section">
<section>
<div>
<button id="button_start">start()</button>
<button id="button_stop">stop()</button>
<button id="button_go">go('50')</button>
<button id="button_go_percentage">go('50%')</button>
<button id="button_finish">finish()</button>
<button id="button_reset">reset()</button>
</div>
<div class="row">
<div class="pie_progress" role="progressbar" data-goal="33">
<div class="pie_progress__number">0%</div>
<div class="pie_progress__label">New Clients</div>
</div>
<div class="pie_progress" role="progressbar" data-goal="-50" data-barcolor="#3daf2c" data-barsize="10" aria-valuemin="-100" aria-valuemax="100">
<div class="pie_progress__content">Hello world</div>
</div>
<div class="pie_progress" role="progressbar" data-goal="100" aria-valuemin="0" aria-valuemax="100">
<span class="pie_progress__number">0%</span>
</div>
<div class="pie_progress--slow" role="progressbar">
<span class="pie_progress__number">0%</span>
</div>
<div class="pie_progress--countdown" role="progressbar">
<span class="pie_progress__number">2: 00</span>
</div>
</div>
</section>
</section>
</div>
<script type="text/javascript" src="js/rainbow.min.js"></script>
<script src="http://libs.useso.com/js/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="src/jquery-asPieProgress.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
$('.pie_progress').asPieProgress({
namespace: 'pie_progress'
});
// Example with grater loading time - loads longer
$('.pie_progress--slow').asPieProgress({
namespace: 'pie_progress',
goal: 1000,
min: 0,
max: 1000,
speed: 200,
easing: 'linear'
});
// Example with grater loading time - loads longer
$('.pie_progress--countdown').asPieProgress({
namespace: 'pie_progress',
easing: 'linear',
first: 120,
max: 120,
goal: 0,
speed: 1200, // 120 s * 1000 ms per s / 100
numberCallback: function(n){
var minutes = Math.floor(this.now/60);
var seconds = this.now % 60;
if(seconds < 10) {
seconds = '0' + seconds;
}
return minutes + ': ' + seconds;
}
});
$('#button_start').on('click', function(){
$('.pie_progress').asPieProgress('start');
});
$('#button_finish').on('click', function(){
$('.pie_progress').asPieProgress('finish');
});
$('#button_go').on('click', function(){
$('.pie_progress').asPieProgress('go',50);
});
$('#button_go_percentage').on('click', function(){
$('.pie_progress').asPieProgress('go','50%');
});
$('#button_stop').on('click', function(){
$('.pie_progress').asPieProgress('stop');
});
$('#button_reset').on('click', function(){
$('.pie_progress').asPieProgress('reset');
});
});
</script>
</body>
</html>*
回帖描述：*
链接类型：*
下载链接：
验证通过自动获取下载链接
*
描述：*
回帖描述：*
链接类型：*
阅读权限：*
下载链接：
微信客服
QQ客服
QQ群
