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.