Pure CSS3 Preloaders for Smoother Animation
Why Use a CSS3 Preloader?Because GIF preloaders are often choppy during heavy lifting.
And because CSS3 looks and works fantastic on iOS!
- The download source includes 3 custom-built pure CSS3 preloaders.
- Minimal markup and easy implementation make these preloaders useful for just about any project.
- Colors and size are easy to change.
- Because they’re built in pure CSS3, the preloaders are retina-ready by default.
- Each preloader includes a GIF fallback for IE.
- Preload an entire web page (see video above) with a lightbox-style fullscreen preloader.
- An API method that allows you to fade the preloader in and out (upon fadeout the keyframe animation is removed automatically for optimal performance).
Lightweight and Easy to UseThe minified CSS is only 3kb, and the minified JS only 1kb.
Here’s a sample of the markup for the first preloader:
<div class="cj-preloader cj-spin"> <span class="cj-outside" /><span class="cj-inside" /> </div>