Ajax Loader
×

Simple Loading Animation (CSS)

The purpose of this animation was to experiment how a background image can give a feeling of perspective to a project. I create a background image in photoshop with 3 transparent rectangles. The background colour was set with css.

Using a simple keyframe animation to move a rectangle from the left to the right makes the illusion of it being masked at certain points.

no-repeat background is commented out to work for large resolution displays (or for full screen viewing). Although the animation is much faster, it would seem as the rectangle is traveling nowhere in a large display.

Not much code was written, but it was fun to play around with this effect.

×

Coding Preferences


HTML

CSS

Javascript

More

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript

    Simple Loading Animation (CSS)

    CSSDeck G+