Power Up Preloader by Mantas Bačiuška

code × January 30, 2014

See the Pen Power Up Preloader (GIF) by Mantas Bačiuška by Katy DeCorah (@katydecorah) on CodePen.

I created another scalable, chameleon, single element project. This is based off of the Dribbble shot, Power Up Preloader by Mantas Bačiuška.

Hover over the battery for LIGHTNING CHARGE (please flick your lights on and off as you read this sentence).

Elements

The main element, .battery, is the outline of the battery. The :before is the inner animating gradient and the :after is the battery contact.

See the Pen Power Up Preloader - deconstructed by Katy DeCorah (@katydecorah) on CodePen.

Demonstration of elements.

You best customize

Like my previous Pens, I also made this one scalable. Try changing $size in the Sass. I added a few conditions for when $size is less than 4em, because when $size is teeny the positioning gets thrown off. To help it along, I added a background-color to .battery to hide the pixel off-ness.

The color of the battery and background will adjust according to $accent. Darkish grays look pretty dope.

Repeating gradients repeating gradients

The magic of this whole thing is the animated gradient. The first step was creating a gradient that was a pattern. The beginning and end must match seamlessly. I carefully crafted (jk, I guessed until I got it right) the repeating-linear-gradient into a pattern.

background: repeating-linear-gradient(-45deg, $bg, $bg 3%, $accent 3%, $accent 25%);

See the Pen Power Up Preloader -- swatch by Katy DeCorah (@katydecorah) on CodePen.

Demonstration of gradient

The animation moves the background-position of the gradient horizontally. In @keyframes I set to {background-position:(($size /2) - $border) 0;}. I used a variable here so that the gradient stays in proportion.

I coupled the @keyframes with animation: charge 0.5s infinite linear; on :before. Once the background-position gets to (($size /2) - $border) it runs again, but it’s seamless so we can’t tell.

It took me a few tries to get the repeating-linear-gradient just right. Gradients are so useful, but dang… I need to spend more time with them. For instance, I didn’t know until about a month ago that the repeating function existed for linear and radial.

I think I’ll need to do some more experiments with gradients.

Mapbox for Jekyll posts THREES App Store Button