<div id="div1"> <divid="Div2" style="border: solid 1px #000000; width: 7px; height: 7px; background-color:
#D3D3D3; float: left; margin-right: 5px; margin-left: 5px;">
</div><div id="Div3"style="border: solid 1px #000000; width: 7px; height: 7px; background-color: #D3D3D3;
margin-right: 5px; float: left;">
</div> <divid="Div4" style="border: solid 1px #000000; width: 7px; height: 7px; background-color:
#D3D3D3; margin-right: 5px; float: left;">
</div>
<div id="Div5" style="border:solid 1px #000000; width: 7px; height: 7px; background-color: #D3D3D3; margin-right:
5px; float: left;">
<
/div> <div id="Div6" style="border: solid 1px #000000;width: 7px; height: 7px; background-color: #D3D3D3; margin-right: 5px; float: left;">
< /div><div id="Div7"style="border: solid 1px #000000; width: 7px; height: 7px; background-color: #D3D3D3;
margin-right: 5px; float: left;">
</div> <div id="Div8" style="border: solid 1px #000000;width: 7px; height: 7px; background-color: #D3D3D3; margin-right: 5px; float: left;">
</div> </div>Add these two buttons at the buttom of your progress bar (divs)
<input type ="button" id="btn_StartLoad" value ="Stop Loading" onclick ="StartLoading();" />
<input type="button" id="btn_StopLoad" value="Stop Loading" onclick="StopLoading();" />Add these javascript functions to the same page which including divs and the two buttons.
var index = 1;
var prevIndex = 0;
var divCount = 7;
var loaded = false;
var Loading;function StartLoading() {
if (!loaded)
{
Loading = setInterval(DoLoading, 450);
}
}function DoLoading() {
loaded = true;
if (index > 1 && index != prevIndex) {
prevIndex = index - 1;
document.getElementById("loading"
+ prevIndex).style.backgroundColor = "#D3D3D3";
document.getElementById("loading"
+ prevIndex).style.border = "solid 1px #000000";
}
else if (index > 1 && index == prevIndex)
{
document.getElementById("loading"
+ (prevIndex - 1)).style.backgroundColor = "#000000";
document.getElementById("loading"
+ (prevIndex - 1)).style.border = "solid 1px red";
index = 1;
}
if (index <= divCount) { document.getElementById("loading"
+ index).style.backgroundColor = "#000000";
document.getElementById("loading"
+ index).style.border = "solid 1px red";
if ((prevIndex - 1) == divCount) {
document.getElementById("loading"
+ (prevIndex - 1)).style.backgroundColor = "#D3D3D3";
document.getElementById("loading"
+ (prevIndex - 1)).style.border = "solid 1px #000000";
}
index++;
if (index > divCount) {
prevIndex = index;
}
}
}function StopLoading() {
clearInterval(Loading);
for (i = 1; i <= divCount; i++) { document.getElementById("loading"
+ (i)).style.backgroundColor = "#D3D3D3";
document.getElementById("loading"
+ (i)).style.border = "solid 1px #000000";
}
loaded = false;
index = 1;
prevIndex = 0;
}Example: