我有一个通过CSS显示加载指示器的php。 问题是不透明度因素,文本将逐渐淡出每一步,另一个问题是第二个div显示边框,但我没有在CSS中定义边框。
我的错误是什么? 任何人都可以帮助我。感谢。
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style type="text/css"><!--
div {
margin: 1px;
height: 20px;
padding: 1px;
border: 1px solid #000;
width: 275px;
background: #fff;
color: #000;
float: left;
clear: right;
top: 38px;
z-index: 9
}
.percents {
background: #FFF;
border: 1px solid #CCC;
margin: 1px;
height: 20px;
position:absolute;
width:275px;
z-index:10;
left: 10px;
top: 38px;
text-align: center;
}
.blocks {
background: #EEE;
height: 20px;
width: 0px;
position: absolute;
z-index:11;
left: 10px;
top: 38px;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: .5
}
-->
</style>
</head>
<body>
<?php
set_time_limit(180);
if (ob_get_level() == 0) {
ob_start();
}
echo str_pad(' ',4096)."<br />\n";
$anzpages = 45;
$data = "";
for ($i = 1; $i <= $anzpages; $i++) {
//This div will show loading percents
echo '<div class="percents">Lade Seite ' . $i . ' von ' . $anzpages . '</div>';
echo '<div class="blocks" style="width:' . ($i / $anzpages) * 100 * 2.75 . ';"></div>';
flush();
ob_flush();
sleep(1);
$data .= "Line: " . $i . "<br/>";
}
echo '<div class="percents">Fertig</div>';
flush();
ob_flush();
sleep(1);
echo $data;
?>
<script type="text/javascript"><!--
$('.percents').hide();
$('.blocks').hide();
--></script>
</body>
</html>