This time I will share jQuery Plugin and tutorial about Minimal Visual Countdown Timer In jQuery, hope it will help you in programming stack.
A small jQuery countdown script to create a countdown timer and loading bar representing the time left until your next event.
How to use it:
1. Build the HTML structure for the countdown timer & loading bar.
1 |
< div class = "countdown-bar" id = "countdownID" > |
2. Load the main JavaScript after jQuery.
2 |
< script src = "/path/to/cdn/jquery.min.js" ></ script > |
4 |
< script src = "/path/to/js/script.js" ></ script > |
3. Start the countdown timer and determine the Datetime from which you want to countdown using the following parameters.
- $element: countdown element
- $daysAdd: days
- $hoursAdd: hours
- $minutesAdd: minutes
- $secondsAdd: seconds
2 |
countdown( 'countdownC' , 0, 0, 0, 10); |
4. The default CSS styles for the countdown timer & laoding bar.
05 |
border : 1px solid rgb ( 233 , 8 , 8 ); |
06 |
background-color : rgba( 189 , 184 , 184 , 0.788 ); |
10 |
div.countdown-bar div:nth-of-type( 1 ) { |
16 |
div.countdown-bar div:nth-of-type( 2 ) { |
5. Override the default styles in the JavaScript.
02 |
$config.loadingBars_width = 200; |
03 |
$config.loadingBars_height = 20; |
04 |
$config.loadingBars_border_color = 'blue' ; |
05 |
$config.loadingBars_color = 'darkblue' ; |
06 |
$config.loadingBars_background_color = 'lightblue' ; |
09 |
$config.timer_color = 'blue' ; |
10 |
$config.timer_font_weight = 700; |
11 |
$config.timer_font = 'Verdana' ; |
12 |
$config.timer_font_size = 12; |
6. Customize the message to show when the countdown is finished.
1 |
$config.endtime_message = 'Timer expired!' ; |
This awesome jQuery plugin is developed by MrVamos. For more Advanced Usages, please check the demo page or visit the official website.