Countdown Timer JQuery

Countdown Timer With Progress Bar jQuery auto-refresher


Countdown Timer JQuery

This Article is all about JQuery Plugins. Countdown timer jquery is a jQuery plugin to create a time countdown progress bar that visualizes the remaining times and triggers a custom function when the countdown is completely finished.

The countdown is a simple jQuery countdown plugin for counting down minutes and seconds from any time to zero.

The plugin also provides customizable controls that enable the user to start/stop the countdown timer manually.

How to use countdown timer jquery plugin

1. Link to the jQuery library and the auto-refresher plugin’s files in the document.

1<link rel="stylesheet" href="dist/css/autorefresher.min.css" />
2<script src="dist/js/autorefresher.js"></script>

2. Create a placeholder element for the countdown progress bar.

1<div class="auto-refresher></div>

3. Call the function on the placeholder element and specify the amount of time, in seconds, before the callback function takes place. The value must be a positive integer. Default: 300.

1$('.auto-refresher').autoRefresher({
2  seconds: 10
3});

4. You can provide any function to execute once the amount of time to wait has been reached. If nothing is provided however, the page is just refreshed.

1$('.auto-refresher').autoRefresher({
2  callback:function () {
3  alert('done')
4  }
5});

5. Determine whether to show the countdown controls. Default: true.

1$('.auto-refresher').autoRefresher({
2  showControls:true
3});

6. Customize the appearance of the controls.

01$('.auto-refresher').autoRefresher({
02
03  // The height of the progress bar. Values must be a positive number + css unit
04  // of measurement (e.g. %, px, em, rem). Default is 7px
05  progressBarHeight:'7px',
06
07  // You can apply css classes to the stop button, such as bootstrap
08  // classes or your own custom ones.  If no value is given, a default
09  // style is applied (refer to auto-refresher-button in autorefresher.css)
10  stopButtonClass:'btn btn-sm btn-outline-secondary m-1',
11
12  // You can set the inner section of the stop button using this
13  // This only applies if showControls is true
14  stopButtonInner:'<i class="fas fa-stop"></i>',
15
16  // You can apply css classes to the start button, such as bootstrap
17  // classes or your own custom ones.  If no value is given, a default
18  // style is applied (refer to auto-refresher-button in autorefresher.css)
19  startButtonClass:'btn btn-sm btn-outline-secondary m-1',
20
21  // You can set the inner section of the start button using this
22  // This only applies if showControls is true
23  startButtonInner:'<i class="fas fa-play"></i>',
24
25  // Custom start/stop button text
26  stopButtonInner:'Stop',
27  startButtonInner:'Start'
28  
29});

7. Show the remaining time on the page.

1<div id="auto-refresher-timer-remaining"></div>
1$('.auto-refresher').autoRefresher({
2  timeRemainingId:'#auto-refresher-timer-remaining'
3});

8. API methods to start/stop the countdown timer. Ideal for creating custom controls.

1$('#auto-refresher').trigger('start');
2$('#auto-refresher').trigger('stop');

 

Leave a Reply

Your email address will not be published. Required fields are marked *