I don't know if it's possible to do a "real" progress bar like in
Flash. Below is my code for a "fake" one. In Mozilla it does squares
every second or so (no relation to actual progress). Due to timing
quirks, this does not work properly in IE, but with ASV we have
animateColor available so it does an animation with that instead.
With Opera, you get the animation and the little squares.
<g visibility="hidden" id="loadingData">
<rect id="loadBackground" fill="#000066"
stroke="white" ry="1" rx="1" height="50" width="250" y="250"
x="400"/>
<text id="loadMessage" text-anchor="middle" font-
family="Arial" font-size="15px" fill="#DFC364" font-weight="bold"
y="280" x="525" startOffset="0">Loading data, please wait ...
<animateColor id="messageColourChange"
xlink:href="#loadMessage" attributeName="fill" values="#DFC364;
#333399;#DFC364" begin="0s" dur="2s" repeatCount="indefinite"
accumulate="none" additive="replace" calcMode="linear" fill="remove"
restart="always"/>
</text>
<rect id="square_animate_0" x="395" y="287"
height="9" width="9" fill="#DFC364" visibility="hidden"/>
<rect id="square_animate_1" x="405" y="287"
height="9" width="9" fill="#DFC364" visibility="hidden"/>
<rect id="square_animate_2" x="415" y="287"
height="9" width="9" fill="#DFC364" visibility="hidden"/>
<rect id="square_animate_3" x="425" y="287"
height="9" width="9" fill="#DFC364" visibility="hidden"/>
<rect id="square_animate_4" x="435" y="287"
height="9" width="9" fill="#DFC364" visibility="hidden"/>
<rect id="square_animate_5" x="445" y="287"
height="9" width="9" fill="#DFC364" visibility="hidden"/>
<rect id="square_animate_6" x="455" y="287"
height="9" width="9" fill="#DFC364" visibility="hidden"/>
<rect id="square_animate_7" x="465" y="287"
height="9" width="9" fill="#DFC364" visibility="hidden"/>
<rect id="square_animate_8" x="475" y="287"
height="9" width="9" fill="#DFC364" visibility="hidden"/>
<rect id="square_animate_9" x="485" y="287"
height="9" width="9" fill="#DFC364" visibility="hidden"/>
<rect id="square_animate_10" x="495" y="287"
height="9" width="9" fill="#DFC364" visibility="hidden"/>
<rect id="square_animate_11" x="505" y="287"
height="9" width="9" fill="#DFC364" visibility="hidden"/>
<rect id="square_animate_12" x="515" y="287"
height="9" width="9" fill="#DFC364" visibility="hidden"/>
<rect id="square_animate_13" x="525" y="287"
height="9" width="9" fill="#DFC364" visibility="hidden"/>
<rect id="square_animate_14" x="535" y="287"
height="9" width="9" fill="#DFC364" visibility="hidden"/>
<rect id="square_animate_15" x="545" y="287"
height="9" width="9" fill="#DFC364" visibility="hidden"/>
<rect id="square_animate_16" x="555" y="287"
height="9" width="9" fill="#DFC364" visibility="hidden"/>
<rect id="square_animate_17" x="565" y="287"
height="9" width="9" fill="#DFC364" visibility="hidden"/>
<rect id="square_animate_18" x="575" y="287"
height="9" width="9" fill="#DFC364" visibility="hidden"/>
<rect id="square_animate_19" x="585" y="287"
height="9" width="9" fill="#DFC364" visibility="hidden"/>
<rect id="square_animate_20" x="595" y="287"
height="9" width="9" fill="#DFC364" visibility="hidden"/>
<rect id="square_animate_21" x="605" y="287"
height="9" width="9" fill="#DFC364" visibility="hidden"/>
<rect id="square_animate_22" x="615" y="287"
height="9" width="9" fill="#DFC364" visibility="hidden"/>
<rect id="square_animate_23" x="625" y="287"
height="9" width="9" fill="#DFC364" visibility="hidden"/>
<rect id="square_animate_24" x="635" y="287"
height="9" width="9" fill="#DFC364" visibility="hidden"/>
</g>
function showLoadingMessage()
{
var loadingMsg = svgdoc.getElementById("loadingData");
loadingMsg.setAttributeNS(null,"visibility", "visible");
if (navigator.appName != 'Adobe SVG Viewer')
{
for (var b=1;b<25;b++)
{
delay = (b * 1500) - 1000;
timeoutArray[b] = setTimeout("showProgressSquare
("+b+")",delay);
}
}
}
function hideLoadingMessage()
{
if(loadingData == false && loadingMap == false)
{
var loadingMsg = svgdoc.getElementById("loadingData");
loadingMsg.setAttributeNS(null,"visibility", "hidden");
if (navigator.appName != 'Adobe SVG Viewer')
{
for (var b=1;b<25;b++)
{
clearTimeout(timeoutArray[b]);
hideProgressSquare(b);
}
}
}
}
function showProgressSquare(boxno)
{
svgdoc.getElementById("square_animate_" + boxno).setAttributeNS
(null,"visibility", "visible");
}
function hideProgressSquare(boxno)
{
svgdoc.getElementById("square_animate_" + boxno).setAttributeNS
(null,"visibility", "hidden");
}
Richard.
--- In [email protected], "pascal.benoist"
<[EMAIL PROTECTED]> wrote:
>
> Hello community,
>
> I would like to know if there is a good solution to the following
> problem :
>
> I use xmlHttpRequest and, cause it is asynchronous, some callback
are
> not done in the same order than the request.
>
> I would like to run an action only when I am sure the preceeding
> action is accomplished.
>
> In the same idea, is there a way to do like Flash when it is first
> loaded : Displaying an image like "LoadingÂ…" while all the loading
is
> fully processedÂ…
>
> Thanks
>
-----
To unsubscribe send a message to: [EMAIL PROTECTED]
-or-
visit http://groups.yahoo.com/group/svg-developers and click "edit my
membership"
----
Yahoo! Groups Links
<*> To visit your group on the web, go to:
http://groups.yahoo.com/group/svg-developers/
<*> Your email settings:
Individual Email | Traditional
<*> To change settings online go to:
http://groups.yahoo.com/group/svg-developers/join
(Yahoo! ID required)
<*> To change settings via email:
mailto:[EMAIL PROTECTED]
mailto:[EMAIL PROTECTED]
<*> To unsubscribe from this group, send an email to:
[EMAIL PROTECTED]
<*> Your use of Yahoo! Groups is subject to:
http://docs.yahoo.com/info/terms/
