Click here to Skip to main content
13,559,559 members
Click here to Skip to main content
Add your own
alternative version


50 bookmarked
Posted 14 Sep 2009
Licenced CPOL

Progress Indicator a'la Google

, 15 Sep 2009
Rate this:
Please Sign up or sign in to vote.
This article presents code for a WinForms implementation of the Google-like compact progress indicator.


If you have been looking for an indeterminate progress indicator control for a WinForms application, this may be useful. It is modeled on the relatively new GoogleTM progress indicator (an annulus with a rotating indicator). The control has properties to change its color, size, rotation speed, and type (externally pulsed or animated).


Although DirectX, XNA, and WPF have gained acceptance, the development of this control was limited to Drawing2D. Many users of WinForms may not have the prerequisites for any of the more advanced methods.

Using the Code

The run-time view of this control is controlled by the following properties and methods.


Name Type Units Default Purpose
<a name="Animate">Animate</a> bool Boolean true Starts (true) and stops (false) the indicator animation
<a name="AnnulusColor">AnnulusColor</a> Color Color Pale Turquoise Sets or gets the base color of the annulus
<a name="BackgroundColor">BackgroundColor</a> Color Color SystemColor.<br />Control Sets or gets the background color of the control
<a name="IndicatorAngularAdvance">IndicatorAngularAdvance</a> int Degrees 10 Sets or gets the number of degrees that the indicator moves on each tick or pulse
<a name="IndicatorColor">IndicatorColor</a> Color Color White Sets or gets the color of the rotating indicator
<a name="IndicatorType">IndicatorType</a> enum INDICATORTYPES ANIMATED Sets or gets whether the control is ANIMATED or PULSED
<a name="InnerRadius">InnerRadius</a> int Pixels 8 Sets or gets the radius of the annulus inner circle
<a name="OuterRadius">OuterRadius</a> int Pixels 12 Sets or gets the radius of the annulus outer circle
<a name="RefreshRate">RefreshRate</a> int Milliseconds 150 Sets or gets the timer tick interval (i.e., the time between control refreshes)
<a name="TransitionColor">TransitionColor</a> Color Color Gray Sets or gets the transition color at annulus mid-position


<a name="Pulse">Pulse</a> Causes indicator to advance

Dimensions and Color Effects


The control dimensions are determined by the OuterRadius (or) value. In the preceding figure, the outer rectangle (red) is the control client rectangle.

The effect of a gradually changing color is called a "blend". In this case, the effect is obtained by using a two-color linear gradient brush along a vertical with a linear blend from the starting color (AnnulusColor) to the ending color (TransitionColor). The blend pattern is specified by two equally sized arrays, named "positions" and "factors". Both arrays contain proportions. The positions array contains values from 0.0F to 1.0F that define proportional distances along the vertical. The factors array contains values from 0.0F to 1.0F that define proportional color from the starting to the ending color along the vertical. In the preceding figure, the values in parentheses are the positions and factors, respectively, for blending of the linear gradient brush.

The InnerRadius (ir) value determines the circle (actually ellipse) that will be excluded from the center of the control. The difference between the outer radius and the inner radius values is the annulus thickness. The annular thickness is also the diameter of the rotating indicator.

Building the Control

The control is built in sixteen steps.

Google Progress Indicator Construction Steps

Both the control's client rectangle and the outer bounding rectangle are specified by the value of OuterRadius. In step two, the background is colored as BackgroundColor. Then the outer bounding rectangle is used to develop the outer region, first by creating a path from an ellipse and then by creating a region from the path. The inner bounding rectangle is specified by the value of InnerRadius and is used to develop the inner region. Regions are used to define the annulus by excluding the inner region from the outer region (step 8). Color is applied using a Linear Gradient Brush with a starting color of AnnulusColor and an ending color of TransitionColor. Blending is performed as described earlier. The annulus is built in its own graphics buffer and is only revised when a color- or size-changing event occurs.

The indicator is built in its own graphic buffer at every timer tick or whenever the control is pulsed. The indicator is initially drawn at the right center position of the annulus. Then a translation and a rotation transformation occur. Thereafter both graphics (annulus and indicator) are rendered to the screen.

Control Source Code

The source code was developed using the Microsoft Visual C# 2008 Express Edition. In the event that the reader downloads this development environment, the MSDN Help Library for the Visual C# 2008 Express Edition should also be downloaded. The source code in GoogleProgressIndicator.cs contains the source for the GraphicsBuffer class. The two classes appear in the same compilation unit so that a reference to an external class (i.e., GraphicsBuffer) is not required.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Software Developer (Senior)
United States United States
I started programming more than 42 years ago using AutoCoder and RPG (note no suffixing numbers). Programs and data were entered using punched cards. Turnaround between submitting a job for compilation and execution was about 3 hours. So much for the "good old days!" Today, I particularly enjoy programming real-time software. I consider myself capable in WinForms, Mobile Apps, and C# although there are occasions that I yearn to return to C and the Win32 API.

You may also be interested in...


Comments and Discussions

GeneralMy vote of 5 Pin
Technoses10-Mar-12 1:58
groupTechnoses10-Mar-12 1:58 
GeneralMy vote of 5 Pin
MC197215-Jul-11 2:46
memberMC197215-Jul-11 2:46 
GeneralThanks Pin
Wimmo15-Sep-09 11:34
memberWimmo15-Sep-09 11:34 
GeneralRe: Thanks Pin
sam.hill15-Sep-09 14:08
membersam.hill15-Sep-09 14:08 
GeneralRe: Thanks Pin
Wimmo15-Sep-09 22:28
memberWimmo15-Sep-09 22:28 
GeneralRe: Thanks Pin
sam.hill16-Sep-09 5:52
membersam.hill16-Sep-09 5:52 
GeneralRe: Thanks Pin
bscaer28-Sep-09 4:53
memberbscaer28-Sep-09 4:53 
GeneralRe: Thanks Pin
Pascal Ganaye21-Aug-11 10:04
memberPascal Ganaye21-Aug-11 10:04 
GeneralThanks for Corrections Pin
gggustafson15-Sep-09 4:11
membergggustafson15-Sep-09 4:11 
GeneralRe: Thanks for Corrections Pin
sam.hill15-Sep-09 5:11
membersam.hill15-Sep-09 5:11 
GeneralMy vote of 1 Pin
sam.hill14-Sep-09 17:55
membersam.hill14-Sep-09 17:55 
GeneralRe: My vote of 1 Pin
Raghu Karupakala15-Sep-09 8:14
memberRaghu Karupakala15-Sep-09 8:14 
GeneralRe: My vote of 1 Pin
sam.hill15-Sep-09 13:48
membersam.hill15-Sep-09 13:48 
GeneralRe: My vote of 1 Pin
sam.hill15-Sep-09 14:03
membersam.hill15-Sep-09 14:03 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web02 | 2.8.180527.1 | Last Updated 15 Sep 2009
Article Copyright 2009 by gggustafson
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid