It’s interesting how much flavor and personality shows up in our side projects compared to our “professional” work. Jamis posted this screenshot into Campfire today to show an iPhone app he’s been developing on the side.

Check out the playful alliteration in those subtitles. I love the personality there. It’s interesting to think about how when a project is a hobby, it frees our mind up somehow to show more personality—to be more playful. Then when it’s time for “professional” work everything gets buttoned up and greyed out. (Unless you’re Wufoo or MailChimp.)

Next time I’m working on something, I want to ask myself: “How would I design this if it were just for fun?”

It’s hard to stifle a smile any time I get a glimpse of the future thanks to WebKit-based browsers like Safari and Chrome (and their mobile counterparts on iOS and Android devices). That happened today when I discovered a way to make an iPhone-style spinner without any images, just CSS.

First attempt

I have been working on a project that targets mobile WebKit browsers so it was natural to explore using -webkit-animation to handle the image rotation. My initial idea was to use a single PNG image as a mask over a colored background which makes it possible to change the color of the spinner in code. Here’s how that looked in CSS:

p#spinner {
  height: 62px;
  width: 62px;
  overflow: hidden;
  background: #000;
  -webkit-mask-image: url("data:image/png[...]");
  -webkit-mask-size: 62px 62px;
  -webkit-animation-name: rotate;
  -webkit-animation-duration: 1.5s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
}

This is how it looks in a browser: Image mask rotation demo

The examples in this post all target WebKit browsers so I’d suggest you fire up Chrome or Safari for viewing the demos. Better yet, try a mobile WebKit browser.

It felt like a win to use a single-frame PNG image instead of an animated GIF but it didn’t look right. Webkit animations smoothly tween rotations so I ended up with what looked like a rotating image instead of the sharp ticking I was going for. Still, masking is an impressive technique that I’m sure will come in handy in another project.

CSS-only, no images

After several failed attempts to make the animation step-based, I still couldn’t get the effect right. I decided to look again into how I could do it without the image. A quick search led to a post by Kilian Valkhof who had a good idea for the basic technique. The first step is to create the bars of the animation by sizing and rotating them around an axis.

<style>
  div.spinner div {
    width: 12%;
    height: 26%;
    background: #000;
    position: absolute;
    left: 44.5%;
    top: 37%;
    opacity: 0;
    -webkit-border-radius: 50px;
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.2);
  }

  div.spinner div.bar1 {
    -webkit-transform:rotate(0deg) translate(0, -142%);
    -webkit-animation-delay: 0s;
  }

  div.spinner div.bar2 {
    -webkit-transform:rotate(30deg) translate(0, -142%);
    -webkit-animation-delay: -0.9167s;
  }

  [...]

  div.spinner div.bar12 {
    -webkit-transform:rotate(330deg) translate(0, -142%);
    -webkit-animation-delay: -0.0833s;
  }
</style>

<div class="spinner">
  <div class="bar1"></div>
  <div class="bar2"></div>
  [...]
  <div class="bar12"></div>
</div>

Each of the twelve bars is rotated 30° from the one previous and given an animation delay equal to 1/12 of a second. This ensures that the bars highlight, then fade in order. All that is left is to define and call the animation for each bar to fade.

@-webkit-keyframes fade {
  from {opacity: 1;}
  to {opacity: 0.25;}
}

div.spinner div {
  [...]
  -webkit-animation: fade 1s linear infinite;
}

Here’s the final animation: CSS spinner demo.

Make it scale

If you look closely at the code you’ll notice some odd percentage values. Using percentages to build the spinner means you can make it any size just by changing the width and height of div.spinner. It’s fully scalable. You can also append additional styles to change colors and add effects. Here are a few examples: Styled spinners demo.

And for those without a webkit browser handy, here’s what it looks like in Mobile Safari:

Quick prototypes. Small teams. No bureaucracy. No lengthy documentation. Limited meetings. A Skunk Works approach to design. They were all essential to Clarence (“Kelly”) Johnson’s process for creating some of the most remarkable planes of the past century, including the Lockheed SR-71 Blackbird [SvN]. Johnson was once described by Time Magazine as perhaps the most successful aviation innovator since Orville and Wilbur Wright.

Six months for the first jet fighter
Head Skunk [Air & Space Magazine] describes how, in 1943, Johnson promised a commanding officer the first jet fighter in six months. The prototype was designed in 150 days in a space built out of engine crates and a circus tent.

Johnson flew back to Burbank to present the project to Lockheed president Robert Gross. The company was working for the war; with three shifts a day, six days a week, it produced 28 airplanes daily. There was no space and there were no people for another project. But Gross, who thought Johnson walked on water, okayed the project and put him in charge of it.

Johnson went around the factory collecting people: “I simply stole them,” he later wrote. He set up a secret shop beside the wind tunnel in a space walled with wood from Hudson engine crates and roofed with a circus tent. Once the facility had been set up, the time remaining for actual design and construction of America’s first jet fighter was 150 days. This was not impossible; North American had designed and built the P-51 Mustang prototype in even less time. Johnson’s team beat the deadline—and the budget—with what would become the P-80 Shooting Star.

The P-80 Shooting Star.

Skunk Works
Johnson’s Skunk Works was the official alias for Lockheed Martin’s Advanced Development Programs (ADP). Of course, the term is now used in many fields to describe a small group that works under the radar on a project.

Some screenshots we’ve discussed recently in Campfire:

Wopata “takes your temperature” in order to identify urgency on its web form.

Interesting approach in the new Google Chrome menu. Edit and Zoom are compacted to a single menu item.

Billings lets you play with this table to see how much you could save with better time tracking.

1) Interesting use of unicode characters for the UI on Flickr:

That triangle up top is actually two triangle characters side-by-side. Sucks that we still have to resort to such hacks for such a common UI shape — but this is a smart solution.

2) Also interesting is this inline tour of the new photo pages. Rollover a number and bubbles pop up to show you what’s fresh for that section.