Following client side javascript based progresssbar control is built in c#, it renders javascript along with the progressbar control we can set the following properties in the control to change the look through following property :-
- ProgressEnd no of segments in progressbar
- ProgressInterval time interval between 2 consecutive segments
- ProgressColor segment color
using System;
using System.Web.UI.WebControls;
using System.Text;
namespace Controls
{
/// <summary>
/// Summary description for ProgressBar.
/// </summary>
public class ProgressBar: WebControl
{
public ProgressBar()
{
//
// TODO: Add constructor logic here
//
}
private int progressEnd=9;
public int ProgressEnd
{
get{return progressEnd;}
set{progressEnd = value;}
}
private string progressColor="Blue";
public string ProgressColor
{
get{return progressColor;}
set{progressColor = value;}
}
private int progressInterval=250; //millisecs
public int ProgressInterval
{
get{return progressInterval;}
set{progressInterval = value;}
}
/// <summary>
/// Overrided function which will render the javascript along with the progressbar
/// </summary>
/// <param name="writer"></param>
protected override void Render(System.Web.UI.HtmlTextWriter writer)
{
StringBuilder sb = new StringBuilder();
sb.Append(@"<script>
var progressEnd = "+ progressEnd + @"; // set to number of progress <span>'s.
var progressColor = '" + progressColor + @"'; // set to progress bar color
var progressInterval = " + progressInterval + @"; // set to time between updates (milli-seconds)
var progressAt = progressEnd;
var progressTimer;
function progress_clear()
{");
if (progressStyle == 0)
{
sb.Append(@"
for (var i = 1; i <= progressEnd; i++)
document.getElementById('progress'+i).style.backgroundColor = 'transparent';
progressAt = 0;
}");
}
else
{
sb.Append(@"
//document.getElementById('progressSpan').style.backgroundColor = 'transparent';
}");
}
sb.Append(@"
function progress_update()
{
progressAt++;
if (progressAt > progressEnd)
progress_clear();
else ");
if (progressStyle==0)
{
sb.Append(@"
alert('hello';)
document.getElementById('progress'+progressAt).style.backgroundColor = progressColor;");
}
else
{
sb.Append(@"{
alert(document.getElementById('progressSpan').style.backgroundColor);
document.getElementById('progressSpan').style.backgroundColor = progressColor;
document.getElementById('progressSpan').width=document.getElementById('progressSpan').width + (progressAt*10);}");
}
sb.Append(@"
progressTimer = setTimeout('progress_update()',progressInterval);
}
function progress_stop()
{
clearTimeout(progressTimer);
progress_clear();
}
function startProgressBar()
{
divProgressBar.style.visibility = 'visible';
pMessage.style.visibility = 'visible';
progress_update();
}
/*
Hides the progress bar and corresponding text
*/
function stopProgressBar()
{
divProgressBar.style.visibility = 'hidden';
pMessage.style.visibility = 'hidden';
progress_stop();
}
</script>");
Page.RegisterStartupScript("progressBar",sb.ToString());
sb = new StringBuilder();
sb.Append(@"
<table>
<tr valign='top'>
<td align='left' style='HEIGHT: 14px'>
<p id='pMessage' style='VISIBILITY:hidden;POSITION:relative'>
<b>Processing request...</b>
</p>
</td>
<td style='HEIGHT: 14px'>
<div style='BORDER-RIGHT:black 1px solid; PADDING-RIGHT:2px; BORDER-TOP:black 1px solid; PADDING-LEFT:2px; FONT-SIZE:12pt; VISIBILITY:hidden; PADDING-BOTTOM:2px; BORDER-LEFT:black 1px solid; PADDING-TOP:2px; BORDER-BOTTOM:black 1px solid; POSITION:relative; HEIGHT:8px' id='divProgressBar'>");
if (progressStyle == 0)
{
for (int cnt=1 ; cnt <= progressEnd ; cnt++)
{
sb.Append(@"<span id='progress"+ cnt +"'> </span> ");
}
}
else
{
sb.Append(@"<span id='progressSpan'> </span> ");
}
sb.Append(@"</div>
</td></tr>
</table>
");
writer.Write(sb.ToString());
base.Render (writer);
}
}
}