c# 中运用js实现百分比数据加载提示
最近做项目由于数据量过大。因此导致页面很长一段时间空白。为了给用户更好的视觉体验，给它一个加载提示。
搜索参考了一下其他的然后把它给修改了。不好意思。参照地址忘了。
效果图：
上面为效果图。
CSS代码：
<style type="text/css">
.loading
{
height: 50px;
padding-top: 17px;
}
.text input
{
float: left;
color: #fff;
height: 32px;
line-height: 34px;
padding: 0 15px;
background: #A70000;
border: 0;
}
.jindu
{
float: left;
margin-left: 14px;
color: #fff;
width: 150px;
height: 32px;
line-height: 32px;
background: #000;
position: relative;
}
.jindu b
{
color: #A70000;
font-size: 0px;
border-width: 10px;
border-color: transparent transparent transparent #A70000;
border-style: dotted dotted dotted solid;
position: absolute;
left: -16px;
top: 5px;
}
.jindu .jindu2
{
width: 0px;
height: 32px;
line-height: 32px;
background: #A70000;
position: absolute;
}
.jindu .text
{
width: 150px;
height: 32px;
line-height: 32px;
text-align: center;
position: absolute;
font-size: 12px;
}
#bg
{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index: 1001;
-moz-opacity: 0.7;
opacity: .70;
filter: alpha(opacity=70);
}
#center
{
width: 328px;
border: 1px solid #8CBEDA;
position: absolute;
top: 40%;
left: 40%;
display: none;
height: 66px;
background-color: white;
font-size: 14px;
font-weight: bold;
z-index: 1002;
}
</style>
HTML代码：
遵循 W3C <!DOCTYPE html>
<div id="bg"></div> <div id="center"> <div class="loading"> <div class="text"> <input type="button" value="正在初始化" /> </div> <div class="jindu"> <b></b> <div class="jindu2"></div> <div class="text">页面总进度 <font>0</font>%</div> </div> </div> </div>
JS代码：
<script src="js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#bg").css("display", "block");
$("#center").css("display", "block");
});
//数据总数
var count = 5;
function loading(title, percent) {
var size = percent * 1.5;
if (percent == 100) {
$('.loading .jindu2').animate({ width: size + 'px' }, 500, function () {
$('.loading input').val(title);
$('.loading font').text(percent);
$('.loading').animate({ top: '-32px' }, 1000, function () {
alert('友情提示：页面加载完毕');
$("#bg").css("display", "none");
$("#center").css("display", "none");
});
});
} else {
$('.loading .jindu2').animate({ width: size + 'px' }, 500, function () {
$('.loading input').val(title);
$('.loading font').text(percent);
});
}
};
for (var i = 1; i < count + 1; i++) {
loading('正在加载数据' + (100 / count) * i, i * (100 / count));
}
</script>