ProgBar

ProgBar is a simple progress bar component written in JavaScript, using only jQuery core functionalities. Some of the features are:

  • progress indicator aimed to provide unobtrusive feedback
  • offers easy-to-use options and methods
  • offers callbacks and interrupts
  • does not require you to add CSS or images
  • does not require additional JavaScript libraries other than jQuery 1.4+
  • is browser backwards compatible down to Internet Explorer 8

// Documentation

    // Include

    You can place the ProgBar script include basically wherever you want, just make sure that jQuery is loaded before. jQuery is required and must be at least version 1.4 to work with ProgBar. Remember to pick jQuery 1.x if you need support for Internet Explorer ≤ 8, otherwise pick 2.x or 3.x.

    1. body
    2. head
    1. <html>
          <head>

              ...

              <script src="jquery.js"></script>

          </head>
          <body>

              ...

              <script src="jquery.progbar.js"></script>

          </body>
      </html>

    // Initialization

    You can create an instance of the ProgBar class by using the native new operator (explicit) or the available jQuery wrapper methods (implicit). Either way, keep the returned instance to work with later.

    1. implicit
    2. explicit
    1. var bar = $(target).ProgBar();

    // Constructors

    Note: You can also use the $ alias instead of the fully qualified jQuery.

    • new ProgBar ( target, options ) : ProgBar
      native object constructor, target is provided as argument
    • jQuery.ProgBar ( options ) : ProgBar
      e.g. $('#foo').ProgBar();
      considers the preceding jQuery object as target

    // Methods

    Note: The highlighted ProgBar refers to an instance of ProgBar.

    • ProgBar.run ( duration, callback )
      starts the progress bar and completes within the specified duration (from 0 % to 100 %)
    • ProgBar.reverse ( duration, callback )
      runs the progress bar from 100 % back to 0 % within the specified duration
    • ProgBar.closeIn ( duration )
      starts the progress bar and fills up to 90 % within the specified duration, then takes 10 times the specified duration to complete
    • ProgBar.fadeOut ()
      completes the progress bar, run this method to complete a call to ProgBar.closeIn() more smoothly
    • ProgBar.reset ()
      resets the progress bar back to 0 %
    • ProgBar.val ( value, duration, callback )
      sets the progress bar to the specified value,
      the value can be set between 0 and 100 or to an absolute amount in case ProgBar.min() and/or ProgBar.max() was previously set
    • ProgBar.min ( value )
      specifies the minimum value range
    • ProgBar.max ( value )
      specifies the maximum value range

    // Options

    options
    width'100%'width of the progress bar
    height'4px'height of the progress bar
    color'#2672EC'color of the progress bar
    outerClass'progbar-outer'class added to the outer container of the progress bar
    innerClass'progbar-inner'class added to the inner container of the progress bar
    duration3000number of milliseconds the progress bar takes to complete,
    some methods offer overwriting this value
    minValue0minimum value range, see method: ProgBar.min()
    maxValue100maximum value range, see method: ProgBar.max()

    // Examples

    Additional looping and timeout code is for demo purpose only and thus not part of the example code.

    ProgBar.run() and ProgBar.reverse(), using their callbacks to loop

    1. <div id="container"></div>

      var bar = new ProgBar('#container');

      bar.run(function() {

          bar.reverse();
      });

    ProgBar.closeIn() and ProgBar.fadeOut()

    1. <div id="container"></div>

      var bar = new ProgBar('#container', { height: 8 });

      // fill up 90 % within 1 second and then "close in"
      bar.closeIn(1000);

      // finish progress after 5 seconds of "closing in" state
      setTimeout(function() {

          bar.fadeOut();

      }, 5000);

    ProgBar.val()

    1. <div id="container"></div>

      var bar = new ProgBar('#container', {

          color:    '#F09A2D',
          height:   16,
          duration: 2000

      }
      );

      bar.val(50);

    // License

    MIT, Copyright (c) 2018 Alexander Kwaschny, kwaschny.net

    // Download