I have a php who shows an loading indicator via CSS. The problem is the opacity factor, the text will be fading out each step, another problem isthat the second div shows an border, but I haven't defined a border in CSS.
What's my mistakes? Can anybody help me pls. Thanks.
<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 />
";
$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>