A common UI metaphor in recent times is the circular wait cursor or progress indicator. This article shows some easy techniques within Expression Blend 2 that simplify creating this modern UI indicator. After showing how to easily layout multiple child elements in a 360-degree pattern, I will show animation techniques for spinning, sizing and fading sub-elements.
Keeping Them Happy While Waiting
It’s a bad idea to start a long running task in your application and not provide concrete feedback to the user. If the user doesn’t know that you started downloading their requested file they will eventually click the download button again. To avoid this you must let them know that their work is under way.
At the minimum, you must alert them that the process has started. This immediate feedback is important to reassure the user that they did the right thing, plus it prevents multiple initiations of the process.
Additionally it is nice if you can convey how long the process will take. This permits the user to make an intelligent decision about what to do next. A coffee break might in order if I know that it’s going to take twenty minutes before I can install the downloaded file.
Finally, providing progress details can be beneficial. If you can display accurate information regarding the amount of time left before the task is finished, so much the better.
Ever since the first UI framework emerged, there have been attempts to provide standardized feedback to the end user. It has taken many forms over the past few decades.
Wait Cursor: One of the earliest attempts at user notification was the wait cursor, which an application would enable upon starting a task. The classic wait cursor is the hourglass or clock face. While this cursor is handy at letting the consumer know that the task has started it provides no other useful information.
ProgressBar: You’ve seen progress bars in action. These simple controls provide a lot of information to the end user. At a glance, you can see the task has started and how much of the task remains to be accomplished. Some versions of the progress bar shows informative text (example: 3 of 12 items downloaded) to provide even more details.
Wait UI in this Century
Change is a constant in the software industry. We are always on the lookout for a better, cleaner, prettier way to accomplish a given task. In the last couple years the circular animation has become a popular way to show wait UI.
Take Windows Vista for example. The busy cursor has morphed from an hourglass into a blue ring with an animated highlight buzzing ceaselessly about the blue band.
Figure 1: Busy cursor.
The Vista Sync Center sports a new icon that spins in the system tray. One glance at the arrows whirling about in the system tray tells you that your handheld device is synchronizing with your desktop.
Figure 2: Sync center animated icon.
The Web world has its share of circular eye candy too. Let’s turn to Silverlight for an example. When your browser encounters a Silverlight application it has to download the application XAP file to your local computer. Naturally during this process the Silverlight runtime displays its version of the ubiquitous 360-degree animation.
Figure 3: Sliverlight loading animation.
A couple of noteworthy items to observe with this animation. First, observe the progress text centered within the animation. Since the animation itself doesn’t provide progress information, the progress text is a useful addition. Second, this animation appears to be more of a pulsing action rather than a spinning action. It does this by making each blue dot grow larger and then suddenly hiding the dot. Each dot in the circle starts animating at a different time with the start time staggered around the circle. This animation is subtle yet curiously satisfying to watch.
Implementing a Circular Animation
In this article, I will show you how to create animations similar to the previous examples. I will use Expression Blend to create the WPF assets and animations. While all the demos are in WPF, rest assured that you could create Silverlight animations in nearly the same way.
Let us start by looking at the Vista busy cursor (see the following video). If you scrutinize this cursor, a few things are apparent. The UI consists of two circles. The center circle is white (or transparent) and is smaller than the outer circle. The outer circle is filled with a linear gradient that is light blue on the top and bottom and dark blue in the center. It also looks like there is a blue border on both circles.
Now watch the spinning animation. You should note that the gradients don’t appear to move. Instead, it looks like there is a semi-transparent ellipse that is superimposed over the band. This implies that it is the ellipse that is moving, not the underlying circles.
Video 1: Aero Busy Cursor
Now that you have a basic idea of the parts that make up the animation it’s time to open Expression Blend and make one for yourself.
The Basic Band
To get warmed up for the upcoming Blend design marathon you will start with a simple band animation.
Admire your ring before moving to the next step.
Animate the Band
In this step you will animate the ring 360 degrees.
That’s all for now. Press F5 to run the application and watch the colors spin once about the circle. It should look similar to the following video (Video 2).
Video 2: Spinning Ring
Creating the Vista wait cursor
The key concept in this next demonstration is understanding how to spin a small ellipse around a center point. With a few rudimentary math skills you can make a circle move in an orbit about a central body. If you master one simple Expression Blend trick, however, you can be an ‘orbit’ master without writing a single line of code.
Create the Starter Ellipse
To start this section you will create another page and basic animation similar to the previous demonstration.
Add a new Page to the demo application. Use the Project menu to change the startup item to your new item. For Example, in the accompanying screenshot I am changing the Startup item to MainWindow.xaml.
Add a new Ellipse (circle) to the page. Create a 360 rotation animation similar to the one you created in the previous demo.
The Gradient Trick
Are you ready to master the orbiting gradient trick?
Applying a transform to a radial gradient brush is the secret sauce that makes this trick work. If you do it the right way you can mimic a small circle that is positioned on the edge of the real ellipse.
Brush Transform Tool
Blend contains a marvelous aid called the Brush Transform tool, that simplifies the editing of your tile or gradient brushes. I’ve written about this tool before (Constraining the Brush Transform Tool, Using a TileBrush in Expression Blend). Using this tool you will move the gradient to the upper-right corner of the containing ellipse.
That’s it. You are finished. Since you already animated the ellipse earlier in this demo you can run the application and watch the animation.
Here is what the animation should look like when you are finished (Video 3).
Video 3: Animated Gradient
Simulate Movement Around a Track
Take a look at the Vista busy cursor video again (video 1). Do you see that the white spot is moving around the outside band? You can simulate that effect by using the technique you just learned. You will need to add a border to your ellipse and apply a gradient fill to the border but that is not difficult.
The animation consists of three ellipses all centered on the same point.
Then you apply a 360-degree animation to the Highlight ellipse and you are done. This is getting closer to our goal of looking like the Vista busy cursor. It’s a bit crude, and it still needs some work but it is close enough for our purposes.
I’ve included a completed sample project (CircularAnimation.zip) for you to explore and learn more about how these animations are constructed.
In part two of this article I will show you how to arrange elements evenly about the perimeter of a circle and how to recreate the Silverlight loading animation.