- <HTML>
- <HEAD>
- <TITLE></TITLE>
- <STYLE>
- .pct{position: absolute; top: 50px; left: 50px; width: 300px; border-style: outset; border-width: 2px; padding: 5px; text-align: center;}
- .pctBefore{font: 20px Arial; color: #FF0000; clip: rect(0,0,0,0); background-color: #CCCCCC;}
- .pctAfter{font: 20px Arial; color: #009966; clip: rect(0,0,0,0); background-color: #EEEEEE;}
- </STYLE>
- </HEAD>
- <BODY>
-
- <DIV ID="pct1" CLASS="pct pctBefore"></DIV>
- <DIV ID="pct2" CLASS="pct pctAfter"></DIV>
-
- <SCRIPT>
- function ShowPct(pct, str){
- iCurrent = (pct / 100) * pct1.offsetWidth
- pct1.innerHTML = str + pct + " %"
- pct2.innerHTML = str + pct + " %"
- pct2.style.clip = "rect(0," + iCurrent +"," + pct1.offsetHeight + ",0)"
- pct1.style.clip = "rect(0," + pct1.offsetWidth +"," + pct1.offsetHeight + "," + iCurrent +")"
- }
- // code test :
- for (i=0; i<=100; i++){
- setTimeout("ShowPct("+i+",'Progression en cours ')", 200*i)
- }
- </SCRIPT>
-
- </BODY>
- </HTML>
<HTML>
<HEAD>
<TITLE></TITLE>
<STYLE>
.pct{position: absolute; top: 50px; left: 50px; width: 300px; border-style: outset; border-width: 2px; padding: 5px; text-align: center;}
.pctBefore{font: 20px Arial; color: #FF0000; clip: rect(0,0,0,0); background-color: #CCCCCC;}
.pctAfter{font: 20px Arial; color: #009966; clip: rect(0,0,0,0); background-color: #EEEEEE;}
</STYLE>
</HEAD>
<BODY>
<DIV ID="pct1" CLASS="pct pctBefore"></DIV>
<DIV ID="pct2" CLASS="pct pctAfter"></DIV>
<SCRIPT>
function ShowPct(pct, str){
iCurrent = (pct / 100) * pct1.offsetWidth
pct1.innerHTML = str + pct + " %"
pct2.innerHTML = str + pct + " %"
pct2.style.clip = "rect(0," + iCurrent +"," + pct1.offsetHeight + ",0)"
pct1.style.clip = "rect(0," + pct1.offsetWidth +"," + pct1.offsetHeight + "," + iCurrent +")"
}
// code test :
for (i=0; i<=100; i++){
setTimeout("ShowPct("+i+",'Progression en cours ')", 200*i)
}
</SCRIPT>
</BODY>
</HTML>