[JavaScript][AJAX]"Pasek postepu" Opcje

[marcio]

Witam chce zrobic taki nieprawdziwy pasek przewijania w ajax+js nie chodzi o dokladny postep uploadowaniu pliku lecz o sam efekt:
http://marcio.szu.pl/up.php jak widac efekt jest ale nie do konca poniewaz pasek odrazu laduje sie do 100% obojetnie jaki dam czas wykonywania setInterval() kumplem mi powiedzial zebym zrobic 2 div'y ktore maja sie zakrywac i potem za pomoca js odkywac jeden ale nie wiem idee jak to zrobic moj kod wyglada tak:

Kod

<?php

if(isset($_GET['perc'])) {

$percent = str_replace('%', '', $_GET['perc']);

echo('<table><tr><td><img src="./cms/grafiki/administration/spinner.gif"></td></tr></table><table style="width:20%;border:1px solid #000000;padding:0px;"><tr><td><img id="loader" src="pollbar.gif" style="background-color:#FF0000;height:18px;width:'.$percent.'%;" alt="wykres_upload"></td></tr></table>');

for($i = $percent; $i <= 100; $i += 10) {
echo('<script>
setTimeout(document.getElementById("loader").style.width="'.$i.'%", 500);
</script>');

  }
}

?>

Jakies pomysly moze inne rozwiazania?

[Darti]

A o animowanym gifie sliyszał ?

[marcio]

A po co mi animowany gif chce cos swojego jak bym chcial bym sie nie pytal.

[Lonas]

http://digitalbush.com/projects/progress-bar-plugin/

[marcio]

http://marcio.szu.pl/up.php juz prawie skonczylem za pomoca kumpla z tego forum tylko jest jedno ale czemu zawsze zostaje kawalek czerwonego paska co zle robie??

I mam jedno pytanie jak teraz zrobic za pomoca php+js ewentualnie ajax ze gdy plik sie zaoplauduje to zawsze bedzie ten progress bar ale gdy bedzie blad np zatrzymam progress bar za pomoca clearInterval() wiem jak to zrobic w js ale jak wyslac zmienna z pliku action uploadu do js ktory bedzie manipulowal progress bar'em?

[erix]

Ustaw rozmiar czcionki na najmniejszą możliwą wartość (w czerwonym pasku).

Choć IMHO byłoby to tło nadawać kontenerowi; warstwa z czerwonym tłem jest tu zbędna.

[marcio]

@Erix moze jasniej??

[erix]

No patrz: masz teraz tak:

Kod

<warstwa1><pasek /><czerwone /></warstwa1>

A mam na myśli tak:

Kod

<warstwa1 style="background-color: red"><pasek /></warstwa1>

pseudokod, jak coś

[marcio]

Nie rozumiem mam taki kod html:

Kod

<div id="upload_process" style="display:none;">
<img src="./cms/grafiki/administration/spinner.gif">
<div id="loader">
<div id="mask"></div>
<div id = "procents"></div>
<div class="clear"></div>
</div>
</div>

Kod css:

Kod

#loader
{  
    position: relative;
    width: 300px;
    height: 18px;
    background: #0B0;
        border: 1px solid #000000;
}                    

#procents
{
    position: absolute;
    width: 300px;
    height: 18px;
    top: -3px;
    text-align: center;
    font-size: 10px;
        padding: 5px;
}

#mask
{            
    float: right;
    width: 300px;
    height: 18px;
    background: #FF0000;
}  

.clear
{
    clear: both;
}

Gdzie robie blad??

P.S co do tego zatrzymywania funkcji myslalem o wysylaniu rezeltatu za pomoca ajax'a do skryptu gdzie jest formularz do upload'u i przy danej wartosci robic zatrzymac np progress bar czy to moze zadzialac?

[erix]

W tej chwili procents i mask to dwie równorzędne warstwy. Przerób kod tak, aby maski w ogóle nie było i abyś zwiększał rozmiar tylko warstwy procents.

P.S co do tego zatrzymywania funkcji myslalem o wysylaniu rezeltatu za pomoca ajax'a do skryptu gdzie jest formularz do upload'u i przy danej wartosci robic zatrzymac np progress bar czy to moze zadzialac?

A trochę jaśniej?