Cubic Countdown

Cubic countdown is a highly customizable JavaScript plugin for yor site.

Features

Browser support

Chrome, Firefox, Safari, Opera, Edge: full support

IE 11: partial support, without 3d-rotation

IE 10-: not supported

Easy usage

<html>
    <head>
        ...
        <link rel="stylesheet" href="css/CubicCountdown.css">
        <script src="js/CubicCountdown.js"></script>
        ...
    </head>
    <body>
        ...
        <div id="cubic-container"></div>
        ...
        <script>
          var myCount = new Cubic({
              element: "#cubic-container",
              ...more options...
          });
        </script>
    </body>
</html>

High customizability

var myCount = new Cubic({
    element: "#cubic-container",
    toTime: "2025-01-01T00:00:00+08:00",
    cssClass: "zzcubic",
    cubeSize: 160,
    cubeSideMargin: 20,
    cubeTextSize: 100,
    colonSize: 17,
    labelTextSize: 20,
    labelOnTop: false,
    labelOffset: 40,
    daysLabel: "days",
    hoursLabel: "hours",
    minutesLabel: "minutes",
    secondsLabel: "seconds",
    showDays: true,
    showHours: true,
    showMinutes: true,
    showSeconds: true,
    leadingZero: true,
    shadowColor: "#414141",
    shadowIntensity: 100,
    animationPreset: 0,
    animationDelay: 100,
    continiousAnimation: false,
    colonAnimation: true,
    autoStart: true,
    onFinish: function(){
        alert("Happy New Year!");
    },
    onTick: function(){
        console.log("tick");
    },
    mobileFirst: false,
    responsive: [
        {
            breakpoint: 1200,
            options: {
                ...options...
            },
        },
        {
            breakpoint: 768,
            options: {
                ...options...
            },
        },
    ],
});

Methods

//Start count
myCount.start();

//Stop count
myCount.stop();

//Remove the countdown from DOM
myCount.remove();

//Append the countdown to DOM
myCount.restore();

//Hide the countdown on the page
myCount.hide();

//Show the countdown on the page
myCount.show();

//Execute "onFinish" callback
myCount.onFinish();

//Execute "onTick" callback
myCount.onTick();

//Get object with current time values
var time = myCount.getTime();

//Change options on the fly
myCount.change({...options...});

CSS styling

Visual properties that are not affected by javaScript code (such as face color, font family, font color, border, etc.) are contained in a CSS file.

Examples

New Year countdown:

Clock mode. Your time:

Count up from zero since page loaded:

1 min countdown since page loaded: