Tim Kjær Lange

UX Designer @ GoToMeeting

iOS installing animation

October 25 · 2015

iOS is full of interesting interaction animations, one of my favorites is the installing animation.

I've recreated the effect with CSS:

See the Pen iOS installing animation by Tim Kjær Lange (@timkl) on CodePen.

The approach is inspired by the work of Lea Verou. I'm reading her book CSS Secrets at the moment.

The first part of the animation is achieved by giving a SVG a stroke-width and then animating the stroke-dasharray.

The second part uses a radial-gradient background with a sudden color-stop. The background is scaled to encompass the entire square.