CooLoader

Cool Under Construction web site


Copy the Path into head tag:

<link rel="stylesheet" href="js/cooloader/cooloader.css" type="text/css" charset="utf-8" />
        
<script type="text/javascript" charset="utf-8" src="js/jquery/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery/jquery-ui.js"></script>
<script type="text/javascript" charset="utf-8" src="js/cooloader/jquery.cooloader-src.js"></script>

 

And set up the code into javascript section:

<script type="text/javascript" charset="utf-8">

$(window).ready(function(){

$('#cooloader').cooloader({

direction    : 'up',
duration    : 3,
effect        : 'easeOutQuint',
tStart        : '20130101000000',
tEnd        : '20131001000000',
pStart        : 0,
pEnd        : 100,
imgB        : 'img/mrj-b.png',
imgH        : 'img/mrj-h.png',
cW            : 250,
cH            : 1,
cMl            : -140,
cMt            : -90,
cC            : '#00C2F5',
cLive        : true,
tTextP        : '%P%',
tTextD        : '<span style="font-weight: bold;">DAYS</span> -%D&nbsp;',
tTextH        : '%H:',
tTextI        : '%I:',
tTextS        : '%S',
tGMT        : +2,

loadLink    : '',

callback    : function(){}

});

});

</script>

Here we go with the options:

direction

You can set: up, down, right or left, everyone set the direction about loader

 

duration

Duration about time, in seconds

 

effect

Set type of effect (example: easeOutQuint), jQuery has so much effects.

 

tStart

[ATTENTION], tStart is the option abount the start time of the project and it will setup YMDHIS, example the start time is 12/12/2013 - 15:30 ok the tStart will be 20131212153000, you need only to set the time.

 

tEnd

Like tStart, but you need to set the end time of project

 

pStart

If you don't want to set the time you can set the percentual, you need to leave null the tStart and tEnd and set pStart and pEnd.

 

pStart

Set the end of percentual

 

imgB

Background image of loader

 

imgH

Hover image of loader

 

cW

Width of content about time or percentual text

 

cH

Height of content about time or percentual text

 

cMl

Margin Left of content about time or percentual text

 

cMt

Margin Top of content about time or percentual text

 

cC

Color of content about time or percentual text

 

cLive

Set if you want countdown is live, example true the countdown countinue to count the end of project

 

tTextP

Percentual Text keyword is %P

 

tTextD

Day Text keyword is %D

 

tTextH

Time Hour Text keyword is %H


tTextI

Time Minute Text keyword is %I


tTextS

Time Seconds Text keyword is %S

 

tGMT

tGMT Time to set your region ;)

 

callback

Set the function to end of countdown, example go to page xyz.html