Animated responsive countdonw for jQuery.
Some bug was corrected. Now interval parameter amd stop method work like expected.
Added speed options property. Now you may customize animation speed. Range is from 0 to "interval". Consider to use 20-50 milliseconds less then interval to avoid animation breaks. Added sample custom stylesheet mb-comingsoon-iceberg.css (and corrisponding less file). Simply use this file instead of the default one or create your own.
<!-- Create a div container -->
<div id="myCounter"></div>
<!-- Load jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
// If load from CDN fail load jQuery locally
if (typeof jQuery == 'undefined') {
document.write(unescape("%3Cscript src='js/Lib/jquery-1.11.0.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>
<!-- Load Mb Coming Soon Timer -->
<script src="js/jquery.mb-comingsoon.min.js"></script>
<script>
// You have few way to initialize the plugin
// Passing a Date
$('#myCounter').mbComingsoon(new Date(2014, 5, 3, 9)) //Expires June 5th 2014 9 o'clock
//or...
// Passing a string (At your own risk, it's culture dependent!)
$('#myCounter').mbComingsoon("June 5th 2014")
//or
//Passing an object containing full options
$('#myCounter').mbComingsoon({
expiryDate: Date,
interval: Number, //Counter uopdate interval
localization: {
days: "days", //Localize labels of counter
hours: "hours",
minutes: "minutes",
seconds: "seconds"
},
speed: Number, //Animation duration in milliseconds from 0 to interval
callBack: Function //Function executed on expiry or if espired
//Callback function pass e reference to the
//mbComingSoon object itself as parameter
// Example:
// function(t) {
// $(t).mbComingSoon({expiryDate: a New Date})
// $(t).mbComingSoon('start');
// }
});
// Finally you have some additional Methds to control the plugin
$('#myCounter').mbComingSoon('start') // start counter
$('#myCounter').mbComingSoon('stop') // stop counter
$('#myCounter').mbComingSoon(options: Object) // Update options
</script>
MbComingsoon is resposive and it is compatible with (but not dependent by) Bootstrap. MbCaomingsoon dinamically load a subset (only 0-9 characters) of "Open Sans Condensed" Google Font (bold style). If your site already use this font you may comment realated line in mb-comingsoon.less (and recompile) or in css file.
Try a demo here.