Countdown Timer With Progress Bar - jQuery auto-refresher

auto-refresher 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 plugin also provides customizable controls that enable the user to start/stop the countdown timer manually.

How to use it:

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

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

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

<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. Value must be a positive integer. Default: 300.

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

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.

$('.auto-refresher').autoRefresher({
  callback: function () {
    alert('done')
  }
});

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

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

6. Customize the appearance of the controls.

$('.auto-refresher').autoRefresher({

  // The height of the progress bar. Values must be a positive number + css unit
  // of measurement (e.g. %, px, em, rem). Default is 7px
  progressBarHeight: '7px',

  // You can apply css classes to the stop button, such as bootstrap
  // classes or your own custom ones.  If no value is given, a default
  // style is applied (refer to auto-refresher-button in autorefresher.css)
  stopButtonClass: 'btn btn-sm btn-outline-secondary m-1',

  // You can set the inner section of the stop button using this
  // This only applies if showControls is true
  stopButtonInner: '<i class="fas fa-stop"></i>',

  // You can apply css classes to the start button, such as bootstrap
  // classes or your own custom ones.  If no value is given, a default
  // style is applied (refer to auto-refresher-button in autorefresher.css)
  startButtonClass: 'btn btn-sm btn-outline-secondary m-1',

  // You can set the inner section of the start button using this
  // This only applies if showControls is true
  startButtonInner: '<i class="fas fa-play"></i>',

  // Custom start/stop button text
  stopButtonInner: 'Stop',
  startButtonInner: 'Start'
  
});

7. Show the remaining time on the page.

<div id="auto-refresher-timer-remaining"></div>

$('.auto-refresher').autoRefresher({
  timeRemainingId: '#auto-refresher-timer-remaining'
});

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

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

---

This awesome jQuery plugin is developed by manbeardgames. For more Advanced Usages, please check the demo page or visit the official website.