AmazeUI如何实现加载进度条

tangjin

作者

小编给大家分享一下AmazeUI如何实现加载进度条，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

AmazeUI 加载进度条的实现示例，具体如下:

<!doctypehtml>
<htmlclass="no-js">
<head>
<metacharset="utf-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="description"content="">
<metaname="keywords"content="">
<metaname="viewport"content="width=device-width,initial-scale=1">
<title>加载进度条</title>
<linkrel="stylesheet"href="assets/css/amazeui.min.css">
<!--[if(gteIE9)|!(IE)]><!-->
<scriptsrc="assets/js/jquery.min.js"></script>
<!--<![endif]-->
<!--[iflteIE8]>
<scriptsrc="assets/ie8/jquery.min.js"></script>
<scriptsrc="assets/ie8/modernizr.js"></script>
<scriptsrc="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->
<scriptsrc="assets/js/amazeui.min.js"></script>
</head>
<bodystyle="margin:10px;">
<!--基本使用-->
<buttonid="np-s"class="am-btnam-btn-primary">$.AMUI.progress.start();</button>
<buttonid="np-d"class="am-btnam-btn-success">$.AMUI.progress.done();</button>
<script>
$(function(){
varprogress=$.AMUI.progress;
$('#np-s').on('click',function(){
progress.start();
});
$('#np-d').on('click',function(){
progress.done();
});
});
</script>
<br><br>
<!--高级使用-->
<buttonid="np-set"class="am-btnam-btn-primary">$.AMUI.progress.set(0.4);</button>
<buttonid="np-inc"class="am-btnam-btn-warning">$.AMUI.progress.inc();</button>
<buttonid="np-fd"class="am-btnam-btn-success">$.AMUI.progress.done(true);</button>
<buttonid="np-status"class="am-btnam-btn-danger">$.AMUI.progress.status;</button>
<script>
$(function(){
varprogress=$.AMUI.progress;
$('#np-set').on('click',function(){
progress.set(0.4);
});
$('#np-inc').on('click',function(){
progress.inc();
});
$('#np-fd').on('click',function(){
progress.done(true);
});
$('#np-status').on('click',function(){
$(this).text('Status:'+progress.status);
});
});
</script>
</body>
</html>

效果图：