CodingJack does not currently provide support for this item.

13 comments found.

Nice little candy! :)

can this script load any kind of HTML web sites?

does it work alright on non PC machines? such as iPad, iPhone etc?



Hi Rotem,

Yes it can be added to any type of webpage. It’s been tested on PC, Mac, iOS and Android.


we tried but the background get black and we dont see the gif. Also it is very slow. :-(

Hi Ramallard,

Not sure I understand. The package comes with 2 different versions of the preloader. One is a “page preloader”, where a dark background would be present (the colors can also be changed in the CSS file). The second is a standalone preloader that can be used for anything you want. The stand-alone version does not have a background.

The only time you’ll see a gif file is in browsers that don’t support CSS3 rotations. So the gif would only appear in Internet Explorer. Otherwise what you’ll see is pure CSS3 .

As far as your question about it “being slow” I’m not quite sure I understand as CSS3 is much faster than traditional gif preloaders. My guess is you’re using the “page preloader” and it takes a while for your page to load? The preloader doesn’t actually preload anything. It’s simply a CSS3 animation that waits for your page to load. So if your page takes a while to load, it means your page has a lot of assets.


Hi, Will this work on just a portion of a page.. lets say.. on the gallery section… the loader will only appear on that part the category thumbnails. and, or a large file image??

Hi jmorales2408,

The package contains 3 variations:

1) A “page preloader” that will preload an entire page.

2) A standalone preloader that’s just pure CSS3

3) A JavaScript enhanced version of #2 above which allows for toggling the preloader on and off easily with JavaScript.

So for preloading a portion of your page, you could use #3 but would need to add some custom JavaScript to handle the toggling.


Hi, Is it possible to fade out the current html page, before preloading the next? Thx

Hi silvering,

This isn’t possible with this component.


How do you use this on a Wordpress site?

Hi Jinghorton,

The component isn’t automatically built for WordPress and some advanced WordPress knowledge would be needed to add it.


damn I was looking for something like this for ages and always used gif animations . not anymore. bookmarked.

???? I am confused by this statement.

Special Note
The first two versions are not 100% transparent. The third version of the preloader is.

Hi FlipMad,

The third version of the preloader is 100% transparent, for example, it could be placed on top of image.

The other two preloaders will only look good when placed on top of a solid color.


This preloader removes the scroll option. Is there a fix for this?

I found that scroll issue is caused by version-1.css

the other 2 css files allow scrolling. Also needs to be noted that there should be a z-index added to #cj-wrapper

Hi nonamer66,

Appreciate the feedback. I’ve gone ahead and patched the files.



Hi ccmagic,

You can do this by editing the CSS.

Inside each “page_preloader.html” example, you’ll see some conditional comments for IE. Here’s an example:

<!--[if lt IE 9]><style type="text/css">.cj-inside {background: none}</style><![endif]-->

Remove the conditional comments so the CSS is applied everyone, like this:

<style type="text/css">.cj-inside {background: none}</style>

Next, inside the CSS file, change this:

.cj-outside {

    /* The size of the preloader bar */
    padding: 5px;

    background: url(../img/fallback_1.gif); /* fallback gif preloader */
    background: -moz-linear-gradient(top, #FFF 0%, #FFF 25%, #444 90%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FFF), color-stop(25%, #FFF), color-stop(90%, #444));
    background: -webkit-linear-gradient(top, #FFF 0%, #FFF 25%, #444 90%);
    background: -o-linear-gradient(top, #FFF 0%, #FFF 25%, #444 90%);
    background: -ms-linear-gradient(top, #FFF 0%, #FFF 25%, #444 90%);
    background: linear-gradient(to bottom, #FFF 0%, #FFF 25%, #444 90%);


to this:

.cj-outside {

    /* The size of the preloader bar */
    padding: 5px;
    background: url(../img/fallback_1.gif); /* fallback gif preloader */



How can I use it with a html 5 video, say when video is waiting show the spinner, then when video is playing hide the spinner. How would you write that with JS Jquery?


Hi Tony,

An example for this would be one of the “toggle_preloader.html” files. Included in the file are a JavaScript file called “js/cj-preloader-controls.js”, and then you can show/hide the preloader like this:


Adding it to a video player depends on the player is setup, but usually there’s some type of event associated with the start of a video, and inside that event, you’d use the “hide” method above. Here’s an example with a basic HTML5 Video player:

.video-wrapper {

    width: 800px;
    height: 500px;
    position: relative;


.cj-preloader {

    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    margin: -20px 0 0 -20px !important;

<div class="video-wrapper">

    <video id="my-video" width="800" height="500" controls>

        <source type="video/mp4" src="video.mp4" />


    <div id="cj-pre" class="cj-preloader cj-spin">

        <span class="cj-outside" /><span class="cj-inside" />



window.onload = function() {

    var video;

    if('addEventListener' in window) {

        video = document.getElementById('my-video');
        video.addEventListener('canplay', onPlay, false);


    function onPlay() {

        video.removeEventListener('canplay', onPlay, false);