php加载指示器出错

时间:2013-06-16 06:05:58

标签: php html css loading indicator

我有一个通过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>

0 个答案:

没有答案