Web Directions has created a No Bit, Sherlock developer challenge, with nice prizes such as a laptop and XBox for the person or persons who comes up with the most creative variation of SVG progress element. A nice play on the name (“no bit”), but even nicer prizes.
I’m not participating in the contest, but couldn’t resist playing with the idea of creating progress elements with SVG.
One type of progress element is the indeterminate progress, also called a throbber. If you use Twitter, it’s equivalent to the circling animated graphic, and indicates that an event is happening, but the web site can’t determine the exact progress of the event.
When I think of an unending event, I always imagine ouroboros, the serpent swallowing its own tail, and creating an infinite seeming circle. It can represent many things in many different cultures but, to me, represents a continuous cycle with no beginning, middle, or end. It just is, until it is no more.
With that in mind, I thought I would try my hand at creating an ouroboros indeterminate progress element. Luckily for me, I didn’t have to stretch my rather limited graphic skills in order to create the ouroboros: Wikipedia provides an elegant graphic, already formatted as SVG (PNG format), and with a license that allows me to use the graphic for my own work.
My first indeterminate progress element plays on the cyclical nature of ouroboros, by rotating the graphic around its origin, as you can see in the following example if your browser supports SVG. Clicking the start button begins the animation; clicking the end button, stops it. The application makes use of the built-in transformational capability of SVG.
It’s an interesting effect, but a little CPU intensive. In addition, there’s nothing uniquely SVG about the effect. I could have just as easily grabbed the PNG formatted graphic and used the new CSS3 transform attributes to rotate the image. I wanted something that plays on the uniqueness of SVG—that non-bit nature of SVG that forms part of the title of the Web Directions contest.
SVG is a vector graphics language, which means that a graphic consists of various elements, all combined into a whole. The ouroboros I used is actually made up of several path elements, forming the head, the eye, and the different scales along the body.
What if, instead of cycling the entire serpent graphic, I just cycle an effect around the serpent? A popular Ajax-based throbber is the one that Twitter uses, and consists of a animated dashed circle, where the dashes around the circle are hidden and displayed using a circular motion.
I applied the Ajax style throbber effect to my ouroboros graphic to create my next effort, as shown below. In this case, the serpent remains static, and only the scales change color, in a circular motion, to indicate some action is taking place.
I prefer the second approach, and it’s less CPU intensive than using a rotating graphic. You can also play with the colors: just make sure there’s enough contrast between “inactive” scale and active one so that the circular effect is easily seen.
Of course, both of these designs are for an indeterminate progress graphic. What about a deterministic one, where there is a beginning, middle, and end?
Even though I was inspired to use ouroboros because of the cyclical nature of the graphic, I’m also using SVG, which I’ve always felt to be synonymous with limitless possibilities. Ouroboros also means complementary opposites and what is more complementary, and opposite, than an event that’s not started, and an event that’s completely finished?
I made a third progress animation, but this time, there is a beginning, middle, and end. As whatever task progresses, my serpent’s scales turn from gray to black. In order to ensure that my application user knows what’s happening, I also provide a text description of the progress.
One last change for all of the graphics: ensuring they’re accessible.
All three graphics are given a role of progressbar. All three would also normally be associated with the task using other ARIA attributes. In addition, since the third application is a deterministic progress graphic, I also set the aria-valuemin, aria-valuemax, and aria-valuenow attributes on the SVG element. (I could have also set these values on the g element that groups the graphic within the SVG.)
If you load the graphic within Firefox using the NVDA open source screenreader, you’ll not only “see” the progress, you’ll also be able to hear the progress. And though these variations are a fixed size for demonstration purposes, they can be easily scaled as small or as large as you want, because I’m using SVG.
A fun little challenge. I’m looking forward to seeing the Web Directions “No Bit, Sherlock” contest entries.