Progress indicator by animating background position
This post experiments with different patterns for indicating progress, you know, those "loading...", "Please wait..." type of things. The progress is shown by using JavaScript to animate the CSS background position.
TheSixtyOne.com
There's this cool site called http://www.thesixtyone.com/, great for discovering new music (if they only agree to ban Foo Fighters, the site will be perfect). Discovering music but also discovering interesting web design patterns, as it turns out.
TheSixtyOne.com shows a progress indicator when you click a song, as if the background shows how the song gets loaded. So I had to try implementing this myself and I also played with two other variants of the background animation.
Here's a video, a little screencast to demonstrate how the loading looks like:
Here are the three examples, take a look at the code, there are no external JavaScript libraries, just some do-it-yourself animation with setInterval()
Example #1 - filling the background
For this you get an image that is at least as long as the container you're about to animate. The height of the background image doesn't matter, could be just one pixel. Here's the image I used.
Ar the start of the animation, the background image is so to the left, it's invisible. At the end of the animation, the background fills out the whole container.
Example #2 - overflowing background
This is a modified version of the previous pattern. Once the background is filled the animation keeps going, so the background escapes from view. Then it's moved back at the beginning and the animation repeats.
Example #3 - dancing arrow
If you remember old radios, this pattern looks like you're playing with the dial. Here, the background image is different, just a small square basically. It gets repeated vertically. Here's the backgournd.
Tags: animation, background position, experiments, progress indicator
July 25th, 2008 at 12:38 am
[…] Last, not least, I decided to try and find some time to update my JavaScript patterns site. Unfortunately I got sidetracked (yep, I’m easily distracted by shiny objects) and played with a not-so-javascript pattern. The post I published (includes a pretty lame screencast! and) demonstrates how you can use animated background position to indicate loading progress. […]
August 10th, 2008 at 7:36 pm
hi, andar here, i just read your post. i like very much. agree to you, sir.
September 5th, 2008 at 4:15 am
[…] - bookmarked by 5 members originally found by peacay on 2008-08-17 Progress indicator by animating background position http://www.jspatterns.com/progress-indicator-by-animating-background-position/ - bookmarked by 4 […]
November 25th, 2008 at 7:45 pm
Cool…,though its something that you learn in your free time.Its like a sliding div.
January 24th, 2009 at 5:42 am
that looks great but if you notice in the website the Progress Bar is going on as the music is going to be loaded I was wondering How can we load a html in a div and figure out how much (bytes) of the code has been loaded , what is your Idea ?
July 1st, 2009 at 8:59 am
[…] UX or User Experience Design Patterns in Ajax Patterns and was merrily reading on the Quince and JS Patterns Progress Indicator Pattern articles when I stumbled upon this idea that I should blog about the UI […]