DOCSEARCHbyAlgolia
Submit Docs

progressbar.js

repository·master·Indexed 27 days ago

https://github.com/kimmobrunfeldt/progressbar.js

A lightweight library for creating responsive, animated SVG progress bars. It supports built-in shapes like Circle, SemiCircle, and Line, as well as custom SVG paths via ProgressBar.Path. The library features customizable animation parameters including easing functions, duration, and a tweening engine using from, to, and step parameters for dynamic transitions.

Tokens
5.2K
Snippets
16
Records
34
Agent score
93%

What's inside progressbar.js

  2. Run tests in Sauce Labs using Karma

    master

    To run tests across multiple browsers in Sauce Labs, use Karma via Grunt. This requires setting up your Sauce Labs credentials as environment variables.

    1. Set environment variables:

      • SAUCE_USERNAME
      • SAUCE_ACCESS_KEY

    2. Run tests:

      • Run all browsers: grunt karma
      • Run a specific set of browsers for faster results: grunt karma:sauce0

  4. Load progressbar.js module

    master

    ProgressBar.js is distributed as a UMD module and can be loaded using CommonJS, AMD, or as a global variable.

    // CommonJS
const ProgressBar = require('progressbar.js')
const line = new ProgressBar.Line('#container');

// AMD
require.config({
    paths: {'progressbar': '../bower_components/progressbar.js/dist/progressbar'}
});

define(['progressbar'], function(ProgressBar) {
    var line = new ProgressBar.Line('#container');
});

// Global variable (if no module loader is used)
// progressbar.js exposes window.ProgressBar
var line = new ProgressBar.Line('#container');

  5. Access SVG paths in embedded <object> tags

    master

    If your SVG is loaded via an <object> tag rather than being inline in the HTML, you must wait for the object to load before accessing the path. You can then access the path via the contentDocument property.

    var heart = document.getElementById('heart');
heart.addEventListener('load', function() {
    var path = new ProgressBar.Path(heart.contentDocument.querySelector('#heart-path'), {
        duration: 300
    });
});

  6. Run tests locally with Grunt or Testem

    master

    Tests are written using Mocha and expect.js. You can run them quickly using Grunt, which utilizes Testem to execute tests in Chrome.

    • Run all tests: grunt test

    If you want to use testem directly:

    • testem: Serves a testing page to connect any browser.
    • testem ci: Runs tests in all available/detected local browsers.
    • testem ci -R dot -l chrome: Runs tests in Chrome using dot reporting.
    grunt test

# Or using testem directly
testem ci -R dot -l chrome

  7. Create custom animations using from, to, and step

    master

    Custom animations are achieved by using the from, to, and step parameters. The tweening engine interpolates values between from and to over time, calling the step function for every frame.

    There is a distinction between defining these parameters during initialization versus during an .animate() call:

    Initialization approach: Defines the animation properties when the progress bar is first created.

    .animate() approach: Defines the animation properties at the moment the animation is triggered, allowing for dynamic transitions.

    // Pass in initialization
var bar = new ProgressBar.Line('#container', {
    from: { color: '#000 '},
    to: { color: '#888 '},
    step: function(state, bar, attachment) {
        bar.path.setAttribute('stroke', state.color);
    }
});

// Pass in .animate() call
var bar = new ProgressBar.Line('#container', {
    step: function(state, bar, attachment) {
        bar.path.setAttribute('stroke', state.color);
    }
});

var opts = {
    from: { color: '#000 '},
    to: { color: '#888'}
};
bar.animate(0.5, opts);

  8. Release a new version

    master

    Releases are automated via Grunt. Before releasing, ensure all files are committed, tests pass, and jshint reports no errors.

    1. Commit and push all changes.
    2. Run npm test to verify local tests and linters.
    3. Ensure Sauce Labs tests pass.
    4. Run the release command. By default, this performs a patch release.

    To specify a different version bump, use one of the following:

    • grunt release:major
    • grunt release:minor
    • grunt release:patch (default)
    npm test
grunt release:major

  10. Set up a local development environment

    master

    To develop on ProgressBar.js, install the necessary global npm tools and then use the provided npm scripts to run the development server and watch for changes.

    1. Install global dependencies:

      • watchify
      • browserify
      • mocha (for testing)
      • testem (for testing)

    2. Run the development environment:

      • Use npm run dev for a shortcut to start development.
      • Alternatively, manually: cd local-dev and serve the folder, then run grunt watch from the project root to watch src/progressbar.js for changes.
    npm install
npm install -g watchify
npm install -g browserify
npm install -g mocha
npm install -g testem

# Shorter way to start development
npm run dev