A simple countdown timer using boostrap 4 progress bar

Installs: 6

Dependents: 0

Suggesters: 0

Security: 0

Stars: 10

Watchers: 1

Forks: 6

Open Issues: 6



dev-master 2019-04-09 11:16 UTC

This package is auto-updated.

Last update: 2022-05-09 19:12:28 UTC


A simple countdown timer using boostrap 4 progress bar

This plugin provides a simple jquery timer using bootstrap 4 progress bar

Basic Usage

  1. Include jQuery:

    <script src=""></script>
  2. Include bootstrap:

    <link rel="stylesheet" type="text/css" href=""></script>
    <script src=""></script>
  3. Include plugin's code:

    <script src="dist/jquery.progressBarTimer.min.js"></script>
  4. Include the plugin container in your HTML:

<div id="countdown"></div>
  1. Call the plugin:
  timeLimit: 60,
  warningThreshold: 5,
  autostart: false,
  onFinish  : function () { console.log('completed') }

Default Options

    timeLimit: 60, //total number of seconds
    warningThreshold: 5, //seconds remaining triggering switch to warning color
    autoStart: true, // start the countdown automatically
    onFinish: function() {}, //invoked once the timer expires
    baseStyle: '', //bootstrap progress bar style at the beginning of the timer
    warningStyle: 'bg-danger', //bootstrap progress bar style in the warning phase
    smooth: false, // should the timer be smooth or stepping
    completeStyle: 'bg-success' //bootstrap progress bar style at completion of timer


.start()             // starts the countdown timer
.stop()              // stops the countdown timer, onComplete is not called
.extendTimer(secs)   // extends the current timer by backing up by the number of seconds provided
.addSeconds(secs)    // adds additional seconds to the original timer and restarts if startOverAfterAdding is true


onComplete					// The function defined in this option is called after the timer completes.


Demo Page


See Contributing


MIT License © Jacob Malliaros