Click here to Skip to main content
15,743,179 members
Articles / Programming Languages / Visual Basic
Posted 25 Nov 2008

Tagged as


133 bookmarked


Rate me:
Please Sign up or sign in to vote.
4.91/5 (39 votes)
12 Dec 2008CPOL7 min read
A Nero style "progress" bar with multiple color segments
In this article, you will learn how to make a Nero-style progress bar that has multiple color segments.



If you use Nero Burning Rom to burn CDs and DVDs, you will without a doubt have noticed the "progress" indicator at the bottom of the compilation window. It shows how much of the disc space is currently used, and it is green as long as the files fit the disc. Depending on the settings, it becomes yellow and then red when the compilation files become too large to fit the available disc space.

I needed a bar like that for my current application, but couldn't find any that possessed the features I required. I did, however, find an article called "Vista Style Progress Bar" - author unlisted - that showed me how to make a very nice looking progressbar. It doesn't look like Nero's space indicator at all, but I was only interested in the color functionality anyway, so it doesn't matter a bit that the bar itself is much nicer looking.

The above link is for a "normal" progressbar, and even though it features three different colors, only one of them can be used at a time. And its value span is hardcoded to a value between 0 and 100.

The Work I Did Initially

I used the code which was originally in C# to make a similar control in VB.NET 2005.

First of all, I fixed two bugs in the control (value out of range check was done incorrectly and the control crashed when value was set to 0).

Then I added a lot of stuff:

  • A maximum and minimum value
  • A 4th color: Yellow (the control can be expanded to support more colors if needed)
  • The possibility to choose the number of color segments (1-3, where 1 = Standard progressbar)
  • Properties for the colors and thresholds of the segments
  • A property for whether or not the thresholds should be shown in the bar (in Nero, they are)

New in Version 1.3

The one thing I was really not content with was the color handling. I adapted the code from the original progressbar control, but it is not optimized to say the least. Every time you want to add a color, you have to add a lot of code. I would rather that the user could choose the colors freely instead of having to depend on the colors that are defined in the control. The problem is that in order to paint a colored segment, the control uses FOUR different shades of that color. Let's say that the user chooses the color "Red" for Segment 1, then the control would have to calculate the three other shades of Red needed in order to be able to paint that segment.

I had absolutely no idea how to do that, but luckily I got a code sample from "Four13 Designs" in the message forum. It takes a given color and calculates a lighter or darker color using a correction factor on all three color components. Great, I thought - I can just use the colors that are already defined to find the correction factor for the three color shades I needed to calculate.

But it turned out that I couldn't do that. The original colors didn't have the same correction factors for the different shades, and they didn't even have the same correction factor between the three RGB components of the same color.

What was I to do? I wanted the "new and improved" control to look the same as the old one with the fixed color definitions. So I didn't want to dabble around with the correction factors myself and possibly create a control that looked different from the original.

I saw no solution to the problem, but I still wanted the user to be able to select the colors freely, so in the end I said "ah, what the f..." and using the old and beproved trial and error method, I came up with correction factors that worked for me, and - as far as I can see with the naked eye - produced colors very similar to the original colors.

My biggest problem was solved.

Please note: The Segment1Color, Segment2Color and Segment2Color properties have changed. They're no longer based on the color Enum, but are now true Color objects. That means that if you've already done a project with a previous version, you will probably have to edit the property types in your form designer file.

Some other major changes in the new version are:

In version 1.2, I introduced a progress percentage text property. I show the value of the NeroBar in percent in the bar. It dawned on me after I published the version that if you use the color segments to indicate a "too large" value like in Nero, then a percentage based on the entire width of the control would not be correct. Let's say you have the MinValue 0, the MaxValue 100, SegmentCount 2 and Segment2StartThreshold 90 in order to show that up to 90 is acceptable, but over 90 is too much, then the percentage should show 100% when the value of the bar is 90 and 111% when the bar value is at 100 (too much, remember?)

So in this version, I've introduced a new property PercentageBasedOn to solve that problem.

For the same application I made this control for, I needed some kind of count down indicator. I thought: Why not use the NeroBar for that too. I wanted the bar to start at max and then count down to 0. At a given point, I wanted the bar to change color to indicate that the countdown was almost over.

So I couldn't use the bar right off with different coilor segments. Instead I implemented a mode where the whole bar changes color when a threshold is passed (Property: ColorChangeMode). That worked fine, but it looked kinda odd I thought. The bar would go from right to left, and to make it an indication of time passing by, I would have preferred the animation to go from left to right. So I even implemented a RightToLeft property that reverses the bar functionality.

These new properties are demonstrated in the demo application as well. Just click the buttons at the bottom and check out the animation.

A Brief Description

There is really not much to explain: The properties are all shown in the demo application, but for giving information, I'll list the properties you will want to know about here:

  • Value (of course)
  • MinValue
  • MaxValue
  • SegmentCount
  • Segment2StartThreshold
  • Segment3StartThreshold
  • Segment1Color
  • Segment2Color
  • Segment3Color
  • DrawThresholds
  • ColorThresholds
  • GlowMode
  • GlowSpeed
  • GlowPause
  • GlowColor
  • PercentageShow (The percentage text color and font are controlled by the Nerobar's ForeColor, Font and TextAlign properties)
  • PercentageBasedOn
  • RightToLeft
  • ColorChangeMode

When you use the demo application, please note that there is no validation of the values, so it will be possible to set the properties to values that the NeroBar will not accept - thus generating an exception. It is merely provided to demonstrate the functionality of the control - not to be a 100% failsafe application.

Possible Improvements

I'm done now! I really have no more ideas how I can improve this control. If anybody can think of something, please let me know.

The only thing I could wish for is some kind of ruler or scale below or in the bar to help determining the progress. I'm going to have a look at that possibility, but rather than incorporating it into this control, I think I'm going to make it a control of its own. We'll see.


  • Version 1.3 (December 12th, 2008)
    • Added:
      • Version history in NeroBar.vb
      • Enhancement: 100% user defined colors
      • Enhancement: When setting "Value" to a value higher than "MaxValue", the percentagetext will show "> 100%" (can be more than 100% as well depending on the PercentageBasedOn setting)
      • Enhancement: Added alpha channel transparency to user selected GlowColor to "smoothen" the glow
      • Enhancement: Progress percentage text can now be aligned using the TextAlign property
      • New Feature: Progress percentage calculation can be based on segments - not just the whole control width
      • New Feature: ColorChangeMode - you can now choose if the whole bar should change color when a threshold is passed - or only the segments as before
      • New Feature: RightToLeft mode
      • New properties: PercentageBasedOn, RightToLeft, ColorChangeMode, TextAlign
      • Custom Visual Studio toobox icon
      • Custom icon for demo application
    • Removed:
      • The six hardcoded colors
    • Bug Fix:
      • Control crashed when Value is between 0 and 0.5 (reported by "Hendrikbez")
    • Irrelevant inherited base properties hidden from designer property grid
    • Updated demo project
  • Version 1.2 (December 4th, 2008)
    • Added:
      • Animated glow (Code adapted from Xasthom's Article)
      • Percentage text
      • New properties: GlowMode, GlowSpeed, GlowPause, GlowColor, PercentageShow
    • Updated demo project
    • Code restructured with regions for better overview
  • Version 1.1 (November 26th, 2008)
    • Added:
      • Two new colors
      • A NeroBarToolStripMenuItem control
      • New property: ColorThresholds
    • Updated demo project
  • Version 1.0 (November 25th, 2008)
    • Initial release


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

Written By
Software Developer (Senior)
Sweden Sweden
Born in Copenhagen, Denmark
Have been living in Paris, France and L.A., The United States
Now live in Stockholm, Sweden

Started programming when I got my first VIC 20, and a few months later on Commodore 64. Those were the days!

Studied programming at the Copenhagen Engineering Academy

Professional console, winforms and webforms programming in Comal, x86 Assembler, Fortran, Pascal, Delphi, Visual Basic 3 through 6, Classic ASP, C# and VB.NET

I now work as Senior Microsoft Dynamics AX and .Net programmer, and have a number of projects in various states of progress to work on in the spare time...

Comments and Discussions

BugAnonymious Pin
NolanUltraThug5916-Sep-20 5:39
NolanUltraThug5916-Sep-20 5:39 
QuestionDownload JCS Nerobar Pin
Nard Ndoka28-Apr-19 10:51
Nard Ndoka28-Apr-19 10:51 
BugSeriously, a TROJAN??!!! Pin
Yuri Naidu7-May-18 21:42
Yuri Naidu7-May-18 21:42 
GeneralRe: Seriously, a TROJAN??!!! Pin
CHill607-May-18 21:48
mveCHill607-May-18 21:48 
BugBug found on 'Segment2StartTreshold' property and 'Segment3StartTreshold' property Pin
Karuntos17-May-17 15:30
Karuntos17-May-17 15:30 
QuestionCan it be a vertical bar ? Pin
Member 1118007425-Oct-14 13:54
Member 1118007425-Oct-14 13:54 
AnswerRe: Can it be a vertical bar ? Pin
Johnny J.2-Nov-14 20:41
professionalJohnny J.2-Nov-14 20:41 
Questionadding some properties of nerobar Pin
Member 1088588317-Jun-14 10:46
Member 1088588317-Jun-14 10:46 
AnswerRe: adding some properties of nerobar Pin
Johnny J.18-Jun-14 4:25
professionalJohnny J.18-Jun-14 4:25 
BugI found a bug-please fix it! Pin
Rixterz1236-Jun-14 11:22
Rixterz1236-Jun-14 11:22 
GeneralRe: I found a bug-please fix it! Pin
Johnny J.9-Jun-14 1:01
professionalJohnny J.9-Jun-14 1:01 
GeneralRe: I found a bug-please fix it! Pin
Rixterz1239-Jun-14 1:09
Rixterz1239-Jun-14 1:09 
GeneralRe: I found a bug-please fix it! Pin
Johnny J.9-Jun-14 1:29
professionalJohnny J.9-Jun-14 1:29 
GeneralMy vote of 5 Pin
Manoj Kumar Choubey22-Feb-12 21:42
professionalManoj Kumar Choubey22-Feb-12 21:42 
QuestionWhats new in V1.4? Pin
Member 84433858-Jan-12 23:05
Member 84433858-Jan-12 23:05 
AnswerRe: Whats new in V1.4? Pin
Johnny J.11-Jan-12 4:01
professionalJohnny J.11-Jan-12 4:01 
GeneralI don't particularly like Nero... Pin
Indivara3-Dec-10 2:43
professionalIndivara3-Dec-10 2:43 
GeneralExcellent work. My vote of 5 Pin
Hassan3D1-Aug-10 10:35
Hassan3D1-Aug-10 10:35 
GeneralMy vote of 5 Pin
ChewsHumans1-Jul-10 16:21
ChewsHumans1-Jul-10 16:21 
QuestionMultiple segments? Pin
i0028-Sep-09 3:15
i0028-Sep-09 3:15 
Generalyou know what Pin
Xmen Real 2-Apr-09 18:23
professional Xmen Real 2-Apr-09 18:23 
GeneralOrientation Pin
shiggin28-Jan-09 2:53
shiggin28-Jan-09 2:53 
GeneralWarning message on VS2008 Pin
JR21223-Dec-08 2:48
JR21223-Dec-08 2:48 
GeneralRe: Warning message on VS2008 Pin
Johnny J.28-Dec-08 21:59
professionalJohnny J.28-Dec-08 21:59 
GeneralRe: Warning message on VS2008 Pin
JR21229-Dec-08 21:24
JR21229-Dec-08 21:24 

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.