15,177,535 members
Articles / Multimedia / GDI+
Article
Posted 17 Jul 2006

#### Stats

693.6K views
479 bookmarked

Rate me:
A new kind of progress bar for .NET 2.0.

## Introduction

When it's time to wait, we are used to seeing the classic blue progress bar. It is everywhere in Windows and many other applications. However, animations are getting more and more popular.

For example, when Firefox loads a page, a small spinning circle appears and shows you that the page is loading. Moreover, Microsoft also uses this kind of animation in the Windows Media Center, Encarta 2006, SQL Server Management Studio Express, etc.

So, why don't we use this concept to show to our users that our application is working and/or loading? Let's begin by the presentation of the component I developed.

## Points of interest

### Rotation speed

The `LoadingCircle` uses a timer, and it has two responsibilities: to determine the color of the next spoke, and to redraw the circle at a specified number of milliseconds. When you use the property `RotationSpeed`, you modify the timer's property named `Interval`. Higher the value is, slower will be the rotation. The default rotation speed is 80, so at every 80 milliseconds, the circle will be redrawn.

### How to draw a spoke?

First of all, we need coordinates for each spoke. We use the function `DrawLine` of GDI+, which needs two points, the beginning and the end of the line.

So, let's review some simple math notions. In order to draw a perfect circle, you have to know the following trigonometry concept: the cosines of an angle in degrees give us the X and the sine gives us the Y.

The method `GetCoordinate` computes, for a specified radius and angle, the coordinates of a point.

C#
```private PointF GetCoordinate(PointF _objCircleCenter,
{
PointF objPoint = new PointF();
double dblAngle = Math.PI * _dblAngle / NUMBER_OF_DEGREES_HALF_CIRCLE;
objPoint.X = _objCircleCenter.X + _intRadius * (float)Math.Cos(dblAngle);
objPoint.Y = _objCircleCenter.Y + _intRadius * (float)Math.Sin(dblAngle);
return objPoint;
}```

The method `DrawLine` uses the coordinates computed by `GetCoordinate`, and draws a line with the two specified points and a color. Of course, we have to pass to this method the `Graphics` object of GDI+. As you can see, each line is rounded with the properties `StartCap` and `EndCap` of the `Pen` object.

C#
```private void DrawLine(Graphics _objGraphics, PointF _objPointOne,
PointF _objPointTwo,
Color _objColor, int _intLineThickness)
{
using(Pen objPen = new Pen(new SolidBrush(_objColor), _intLineThickness))
{
objPen.StartCap = LineCap.Round;
objPen.EndCap = LineCap.Round;
_objGraphics.DrawLine(objPen, _objPointOne, _objPointTwo);
}
}```

## How to use this component?

This component is quite easy to use. Once added to your toolbox, drag it to your form, and you are in business! Now, all you have to do is to play with the properties which change the look of the circle. Those are under the category "LoadingCircle" in the Properties panel. Also, you can change the `Active` property to `true` or `false` to see the animation running or not.

The component has the following properties.

• `Color` - The color of an inactive spoke.
• `OuterCircleRadius` - This property is the radius of the outer circle. The value of this property is supposed to be higher than the `InnerCircleRadius` value.
• `InnerCircleRadius` - This property is the radius of the inner circle.
• `NumberSpoke` - This property is the number of spokes.
• `Active` - Defines if the component is animated or not. So, if tour treatment is in progress, this property should be set to `true`, otherwise `false`.
• `SpokeThickness` - Thickness of the line in pixel.
• `RotationSpeed` - Animation speed. Lower is the value, faster is the animation.

## Conclusion

Finally, I wish you will find this component useful. I had fun writing it, and wish you will use it. Thanks for reading this article.

## Revision history

• June 17, 2006 : Initial release.
• February 05, 2007 : Better color management (alpha blending)
• February 10, 2007 : Presets defined in the control (MacOS X, Internet Explorer 7 and FireFox). A new control has been added: LoadingCircleToolStripMenuItem. This control is compatible with the StatusStrip! Supports transparency. Some minors bug corrections.

## Share

Looking for an online tool which allows you to sort the content of your text file, remove duplicate lines as well as empty lines. Go take a look at my new website: https://sortlines.com

 Very nice ldyc4-Apr-07 5:50 ldyc 4-Apr-07 5:50
 Animation stops while long process executes jwhite046125-Mar-07 7:22 jwhite0461 25-Mar-07 7:22
 Re: Animation stops while long process executes Martin Gagne26-Mar-07 4:08 Martin Gagne 26-Mar-07 4:08
 Re: Animation stops while long process executes jwhite046126-Mar-07 5:24 jwhite0461 26-Mar-07 5:24
 Re: Animation stops while long process executes [modified] Martin Gagne26-Mar-07 5:33 Martin Gagne 26-Mar-07 5:33
 Re: Animation stops while long process executes jwhite046126-Mar-07 6:59 jwhite0461 26-Mar-07 6:59
 Re: Animation stops while long process executes esupport17-Apr-07 7:21 esupport 17-Apr-07 7:21
 Re: Animation stops while long process executes SalizarMarxx23-Dec-07 18:31 SalizarMarxx 23-Dec-07 18:31
 This is technically incorrect... There is a simple test an an even easier solution. Create a Windows Form objcet, add your Loading CIrcle. Now create a Async Call Method Group. Example Copy Code ```
delegate void DoSomethingDelegate();
DoSometihngDelegate iDoSomething;

{
idoSomething = new DoSOmethingDelegate(WorkerMethod);
idoSomething.BeginInvoke(DoSomethinCallBack, this);
}

private void WorkerMethod()
{
int waitfor = 1000;
for(int i = 0; i < waitfor; i++)
}

private void DoSometingCallBack(IAsyncResult ar)
{
iDoSomething.EndInvoke(ar);
this.Invoke(new UpdateUIDelegate(UpdateUI));
}

delegate void UpdateUIDelegate();
private void UpdateUI()
{
//End With UI update
}
``` The Above Code Works as expected, and there are no issues... However if you make a slight modification to the Async call stack by using a AsynWaitHandle teh loading circle refuses to animate. This shouldn't be an issue as even with using the WaitHandle the work is still being done on a second thread away from the UI thread. The Solution is simple though. Simply change the time object from a Windows.Forms.Timer to a System.Timer.Timer object which is capable of truly handling mutiple thread events with out issues... Here the is the code that will not animate correctly with the Form TImer Copy Code ```
{
iDoSomething = new iDoSOmethingDelegate(WorkerMethod);
IAsyncResult aResult = iDoSomething.BeginInvoke(null, null);
aResult.AsyncWaitHandle.WaitOne();

iDoSomething.EndInvoke(aResult);
}
```
 Java Port gyftakis6-Mar-07 2:46 gyftakis 6-Mar-07 2:46
 Re: Java Port Martin Gagne6-Mar-07 3:18 Martin Gagne 6-Mar-07 3:18
 Re: Java Port gyftakis6-Mar-07 4:36 gyftakis 6-Mar-07 4:36
 Re: Java Port gyftakis6-Mar-07 7:42 gyftakis 6-Mar-07 7:42
 Re: Java Port Martin Gagne6-Mar-07 7:55 Martin Gagne 6-Mar-07 7:55
 A similar Control PITRep15-Feb-07 6:06 PITRep 15-Feb-07 6:06
 Spokes Lukasz Swiatkowski13-Feb-07 6:47 Lukasz Swiatkowski 13-Feb-07 6:47
 Re: Spokes eclipse2k113-Feb-07 23:46 eclipse2k1 13-Feb-07 23:46
 Support transparency Ajek13-Feb-07 3:27 Ajek 13-Feb-07 3:27
 Re: Support transparency Patrick Etc.15-Feb-07 21:34 Patrick Etc. 15-Feb-07 21:34
 Slick, useful, and well written - I vote 5 as well BradOsterloo12-Feb-07 8:51 BradOsterloo 12-Feb-07 8:51
 Re: Slick, useful, and well written - I vote 5 as well eclipse2k113-Feb-07 8:45 eclipse2k1 13-Feb-07 8:45
 Another addition to the control Patrick Etc.6-Feb-07 17:33 Patrick Etc. 6-Feb-07 17:33
 Re: Another addition to the control Martin Gagne6-Feb-07 17:50 Martin Gagne 6-Feb-07 17:50
 Re: Another addition to the control Patrick Etc.6-Feb-07 18:32 Patrick Etc. 6-Feb-07 18:32
 Coolest. Control. EVER. Patrick Etc.6-Feb-07 11:08 Patrick Etc. 6-Feb-07 11:08
 Re: Coolest. Control. EVER. Martin Gagne6-Feb-07 11:28 Martin Gagne 6-Feb-07 11:28
 Last Visit: 31-Dec-99 19:00     Last Update: 26-Jan-22 2:21 Refresh ᐊ Prev1234567 Next ᐅ