As I mentioned on the Working Code podcast a few months ago, I finally started using Apple’s TimeMachine to back-up my Mac. The back-up process goes through a few difference phases: preparation, backing-up, and clean-up. During the “preparation” phase, the TimeMachine system menu shows a fun little progress indicator in which the progress bar bounces back-and-forth from left-to-right. Seeing as I’ve been so focused on ColdFusion / Lucee CFML code lately, I thought it would be a fun code kata to try and recreate the TimeMachine progress indicator using CSS @keyframes animation.

CSS @keyframes animation define a series of states that an element will be in during the course of the animation execution. The browser then transitions (hopefully smoothly) from one state to another using a timing function. In our case, since we want the progress indicator to move from one side to another and then back again, our @keyframes definition needs to define a timeline in which 0% is to-the-left, 50% is to-the-right, and then 100% is back to the left again. This way, as the animation iterates infinitely, the indicator will animate in a continuous cycle: left, right, left, right, left, right, ad nauseam.

To keep things simple (aka, so that I can build it), I’m going to use the CSS property, left, in order to move the indicator as an absolutely positioned element within the parent progress bar. In an ideal world, I’d use something like translateX() in order to move the indicator around as that would allow me to take advantage of GPU-accelerated animations. But, that was a bit beyond my skill-set; so, left it is!

#html / css #css #css keyframes