http://www.runoob.com/jqueryui/example-progressbar.html 参照网址
<style>
.ui-progressbar {
position: relative;
}
.progress-label {
position: absolute;
left: 50%;
top: 4px;
font-weight: bold;
text-shadow: 1px 1px 0 #fff;
}
</style>
<body>
<div id="progressbar" style="display:none; width:100%"><div class="progress-label">加载...</div></div>
<svg id="container"></svg>
</body>
<script src="js/jquery-1.8.0.min.js"></script>
<script src="js/jquery-ui.min.js"></script>//必须引用的js
<link rel="stylesheet" href="css/jquery-ui.min.css">//必须引用的js
<script type="text/javascript">
function show(){//进度条显示
// $("#progressbar").slideToggle("slow"); //这个方法也可显示
document.getElementById("progressbar").style.display="";
}
function hidden() {
document.getElementById("progressbar").style.display="none";
}
$(function() {
var progressbar = $( "#progressbar" ),
progressLabel = $( ".progress-label" );
progressbar.progressbar({
value: false,
change: function() {
progressLabel.text( progressbar.progressbar( "value" ) + "%" );
},
complete: function() {
progressLabel.text( "完成！" );
}
});
function progress() {
var val = progressbar.progressbar( "value" ) || 0;
progressbar.progressbar( "value", val + 1 );
if ( val < 99 ) {
setTimeout( progress, 100 );
}
}
setTimeout( progress, 3000 );
});
function Delete(o){
show();//显示进度条
var id= $(o).parent().siblings('[data-name="id"]').html();
var url='/api/departmentmanagementdelete';
$.ajax({
type:"POST",
async:false,
url:url,
dataType:"json",
data:{id:id},
success:function (response) {
if(response.code==0){
alert("部门删除成功");
window.location.reload();
hidden();//隐藏进度条
}else{
alert("删除失败，请再次操作");
window.location.reload();
hidden();//隐藏进度条
}
},error: function(err){
alert("删除失败，请再次操作");
window.location.reload();
hidden();//隐藏进度条
}
})
}
</script>
