Progress Bars Are Boring (Extreme GUI Makeover)

Some applications, like Eclipse, show a progress bar in their splash screen during the startup phase. This is a useful way to show the user that the application is actually working in the background. It helps the user to wait for the end of the process without kicking. Without such a progress indicator, the application could appear to be frozen.

During this year’s Extreme GUI Makeover session we demonstrated a nice replacement for common progress indicator. Rather than using a progress bar, a percentage or even a status text, we chose to use colors instead.

Download the following video to see how our splash screen conveys the progress information.

Alternatively, you can take a look at the screenshot below. The splash screen first appear as a sepia image. As the application loads, the image gradually turns to a fully colored picture.

Extreme GUI Makeover

Implementing this effect is very simple with Java SE 6 and the Timing Framework to fake the loading process. The first state of the splash screen is shown by using a new command line flag which lets you pick any PNG file to use it as your application’s splash screen. This is really nice because this command supports the alpha channel of the PNG file format, thus letting you create splash screens with drop shadows and other translucency effects.

java -splash:./lib/splash-sepia.png [...]

The biggest advantage of this flag over the use of a Java window is that the splash screen shows up as soon as the JVM is started. The user will therefore see the splash screen during your application’s startup and during the JVM’s startup.

Even though the JVM is responsible for creating and drawing the splash screen, our application can get a handle on a Graphics2D object which lets us paint over the splash screen. In this example, we will fade the colored version of the splash screen over the original sepia image. By doing so, we will mimic the effect of coloring the sepia image.

SplashScreen splash = SplashScreen.getSplashScreen();
if (splash != null) {
    // Load the sepia and colored images
    colorSplashImage = null;
    try {
        colorSplashImage = GraphicsUtilities.loadCompatibleImage(
        sepiaSplashImage = GraphicsUtilities.loadCompatibleImage(
            new File("./lib/splash-sepia.png").toURI().toURL());
    } catch (IOException e) {

    // Emulates the progress
    Animator animator = PropertySetter.createAnimator(
        6000, this, "colorSplash", 1.0f);
    animator.addTarget(new TimingTargetAdapter() {
        public void end() {

This piece of code grabs the SplashScreen instance to make sure we have a splash screen. The null test is mandatory in case your application is started without the -splash flag. The code then proceeds with loading the sepia and colored images and finally starts an animation to simulate a lengthy startup process. In this example, we simulate a startup sequence of 6 seconds.

The actual work is performed in the method setColorSplash(), which would be the equivalent of a progress bar’s setProgress() method. The method stores the current progress value, grabs the splash screen’s graphics surface and paints the effect:

public float getColorSplash() {
    return colorSplash;

public void setColorSplash(float colorSplash) {
    this.colorSplash = colorSplash;

    SplashScreen splash = SplashScreen.getSplashScreen();
    Graphics2D g2 = splash.createGraphics();

    g2.fillRect(0, 0, splash.getSize().width, splash.getSize().height);

    g2.drawImage(sepiaSplashImage, 0, 0, null);

    g2.drawImage(colorSplashImage, 0, 0, null);


You might be surprised by the first painting commands. The first action here is to clear the splash screen. On the contrary to Swing components, the splash screen is never updated automatically and everything you draw on the splash screen is persistent. Without the clear operation, our drawings would add up and the colorization would happen a lot faster than expected. The rest of the code is straightforward. We first draw the sepia image, then we set an alpha composite to draw a translucent copy of the colored image. Do not forget the call to update() to synchronize the splash screen with the changes you made on the graphics surface.

This is naturally only one example of what you can do with a splash screen to replace a dull progress bar. The translucency trick will work in many situations but you might want to consider SwingX’s blending modes. The BlendComposite class mimics all of Photoshop’s blending modes and lets you create beautiful lighting and coloring effects.

19 Responses to “Progress Bars Are Boring (Extreme GUI Makeover)”

  1. Sylvain says:

    Yes progress bar are boring.
    Anyway I’m not really sure that a good UI shall rely exclusively on color effect for such informations.

    What about accessibility?

    A nice effect is pretty good, but it shall be completed by an effective display. The old-fashioned progress bar might not be the most sexy, but it could be replaced by something like a filling bottle or whatever.

    Keep the effect but add something that is useable by everyone.

  2. Romain Guy says:

    It’s an excellent remark and my answer will be the same as usual when it comes to Extreme GUI Makeover. It’s an *Extreme* GUI Makeover :) The idea behind those talks is to show cool-looking effects that teach how to use Swing and Java 2D effectively and that *might* be reused in your applications.

  3. Pop says:

    The effect is nice, but, as said, it’s not very obvious that the app is loading. But maybe just a little caption saying “Bob the builder is putting things up” would be the trick.
    Nice picture, looks like a Fimo plastercine build house. :-)

  4. Brad says:

    I’m just wondering what’s holding up the release of the demo? Not that it’s a big deal I’m just wondering if it’s the same reason my demo code is always delayed (cuz it’s being held together by spit and glue)

  5. Romain Guy says:

    Brad: lawyers, JDK 6, JSR 296 and JSR 295 :)

  6. Natasha says:

    The advantage of standard progress bars is that you can tell roughly how much time is left before the app loads. In your example, this isn’t very obvious. If you had something like a color wheel that goes from sepia to full color along with the image transition, it would make it clearer what stage the loading is at.

  7. Pop says:

    lawyers???? You mean Ally Mc Beal is hidden in the demo?

  8. Natasha – the splash screen of Azureus has the mix of two. It starts with a gray scale picture of a frog, and the progress is shown by painting the frog in full color from the left to the right. So, the progress is shown by the location of the gray scale / full color border.

  9. JS says:

    Neat effect, but not a suitable replacement for a progress bar.

    Others have already mentioned the fact that there’s not really any way to determine how far along the app is in loading. Additionally, I’d imagine the heavy use of reds and greens in your example could cause issues for color blind users.

  10. Zahid says:


    Can it be used for jdk 1.5? Also can it be
    Eclipse 3.2?

    Thanks in advance for looking into it.


  11. Hapepe82 says:

    Excellent idea!

    In a real-application context I would always combine it with a traditional “oldskool”-numeric information in one of the corners of the image, but I definitely like the idea in general!


  12. Please have look at my website. I intend to make it more innovative as well creative without affecting SEO process.
    Please recommend…Have a word!!

  13. cherly says:

    Good 235rter2rwer23r

  14. Your bookmarking strategy is working as I Found you through Stumbleupon. Check out my website if you get a chance, just click on name. (I don’t want to leave a link, it looks too spammy)

  15. Makeup DIY says:

    Hey hunnie, sweet website! I really like this article.. I was wondering about this for a while now. This cleared a lot up for me! Do you have a rss feed that I can add?

  16. Good day. Initial I wish to say that I really like your weblog, just observed it last week but I have been following it constantly since then.

    I seem to be to consent with most of your respective thoughts and opinions and this submit is no exception. totally

    Thank you for the good blog and I hope you retain up the very good work. If you do I will continue to checked out it.

    Possess a wonderful day.