imalliar/jquery.progress-bar-timer

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

Language:JavaScript

Type:component

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

This package is auto-updated.

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


README

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="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  2. Include bootstrap:

    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></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:
$("#countdown").progressBarTimer({
  timeLimit: 60,
  warningThreshold: 5,
  autostart: false,
  onFinish  : function () { console.log('completed') }
}).start()

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
}

Functions

.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

Callbacks

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

Demo

Demo Page

Contributing

See Contributing

License

MIT License © Jacob Malliaros