Responsive and slick progress bars

Overview

ProgressBar.js


Demo animation


Responsive and slick progress bars with animated SVG paths. Use built-in shapes or create your own paths. Customize the animations as you wish.

Documentation is hosted at readthedocs.org.

Shortcuts

Build status

Build Status Build status and browser tests for current master

Sauce Test Status

Contributing

See documentation for contributors.

Thanks

This project is a grateful recipient of the Futurice Open Source sponsorship program.

Comments
  • The instance of the ProgressBar Shape/Path should be accessible from the step function.

    The instance of the ProgressBar Shape/Path should be accessible from the step function.

    Unless i missed something, when using ProgressBar.Path there is no way to get the reference to itself from the step function supplied in instantiation unless using some round about referencing method. I would propose this also be passed as an argument to step or merged in to the state provided to step.

    Example usage would be to animate a progress bar on an irregular shaped custom path (like an arc) and also animate some text like a counter (similar to what is built in to circle and line) and might be achieved with the following:

    var svgPath = document.getElementById('svgPath'),
          counter = document.getElementById('counter');
    
    var p = new ProgressBar.Path(svgPath, {
          duration: 800,
          from: { strokeOffset: svgPath.getTotalLength() },
          to: { strokeOffset: 0 },
          attachment: { path: svgPath, counter: counter },
          // here self would be a ref to the ProgressBar.Path instance
          step: function (state, attachment, self) {
              attachment.path.setAttribute('strokeOffset', state.strokeOffset);
              attachment.counter.innerHTML = (self.value()*100);
          }
    });
    
    p.animate(0.75);
    
    opened by prodigitalson 11
  • Allow HTML in progress text

    Allow HTML in progress text

    This edit needs to be compiled into the final JS files - but basically this lets you add HTML inside the progress text dynamically. I encountered this problem when I needed the text to contain a number and below it another number and in a different color & smaller.

    opened by ghost 10
  • Demo suggestions

    Demo suggestions

    I'm working on a new demo page for the project. I'd be open to add your demos to the new site. If you want to suggest a demo, comment to this issue with:

    • Link to JSFiddle, you can fork this: http://jsfiddle.net/kimmobrunfeldt/a1osxLdj/3/
    • Short description, max 27 chars
    • Your name

    Example of submission below. Demos will be attributed to the creator of course.

    Current visual design of the new page looks like this:

    demo

    pending input 
    opened by kimmobrunfeldt 8
  • Seek to a specific point

    Seek to a specific point

    Hey, that's a wonderful library. I was wondering if there's a seek to a specific point in the progress bar function? Or you could guide me and I could write one if there isn't?

    feature idea 
    opened by RonCan 8
  • Add trailWidth and centerTail options

    Add trailWidth and centerTail options

    Allow users to specify trail width and center tail on the path. screen shot 2014-11-19 at 1 14 35 pm

    Sample usage:

            var progressBar = new ProgressBar.Circle(document.getElementById("container"), {
                strokeWidth: 10,
                color: "#fb7d08",
                trailColor: "#9797a5",
                trailWidth: 1,
                centerTrail: true
            });
    
            progressBar.set(0.3);
    
    
            var progressBar2 = new ProgressBar.Circle(document.getElementById("container"), {
                strokeWidth: 10,
                trailWidth: 1,
                trailColor: "#9797a5",
                centerTrail: true,
                color: "#6cb519"
            });
    
    opened by MayaLi 8
  • Ability to make a stacked progress bar?

    Ability to make a stacked progress bar?

    Is it possible to have multiple measurements in one progress bar? For example, if I want a bar to be empty, and if one button is clicked, it fills up X% green, and if I click a different button, the same bar fills up Y% yellow?

    EDIT: This is called a stacked progress bar

    help wanted feature idea pull request welcome 
    opened by cassidoo 7
  • Can't read property 'length' of null

    Can't read property 'length' of null

    When I'm changing my bar animate(), it somethings throws this error at me. Not on circles, but on line. After digging into the source code, it seems to pointing at shifty.js line 1251.

    Error code below, cut off the path of my files dir ##only:

    \node_modules\shifty\dist\shi…:1251 Uncaught TypeError: Cannot read property 'length' of null getFormatChunksFrom @ node_modules\progressbar.js\node_modules\shifty\dist\shi…:1251 (anonymous function) @ \node_modules\progressbar.js\node_modules\shifty\dist\shi…:1449 each @ \node_modules\progressbar.js\node_modules\shifty\dist\shi…:59 getFormatManifests @ \node_modules\progressbar.js\node_modules\shifty\dist\shi…:1441 tweenCreated @ \node_modules\progressbar.js\node_modules\shifty\dist\shi…:1631 (anonymous function) @ \node_modules\progressbar.js\node_modules\shifty\dist\shi…:164 each @ \node_modules\progressbar.js\node_modules\shifty\dist\shi…:59 applyFilter @ \node_modules\progressbar.js\node_modules\shifty\dist\shi…:162 Tweenable.setConfig @ \node_modules\progressbar.js\node_modules\shifty\dist\shi…:385 Tweenable.tween @ \node_modules\progressbar.js\node_modules\shifty\dist\shi…:300 animate @ \node_modules\progressbar.js\src\path.js:104 animate @ \node_modules\progressbar.js\src\shape.js:111 (anonymous function) @ index.js:221 // these two are just me calling animate() request.onload @ index.js:269 // these two are just me calling animate()

    pull request welcome pending input 
    opened by s92025592025 7
  • Outline instead of trail

    Outline instead of trail

    @kimmobrunfeldt Is it possible to make an outline instead of a trail line in the background? It should look like this:

    image

    If it is not implemented yet, would it be possible to do so?

    opened by sebu10n 7
  • Issue with the stroke showing in rgb not HEX

    Issue with the stroke showing in rgb not HEX

    I have an issue that the stroke in showing in RGB not HEX so it doesn't show in IE untitled-1 How do I get it in HEX? all the variables are in HEX

    my code:

    var element = document.getElementById('timeC');
    var circle = new ProgressBar.Circle(element, {
        trailColor: '#D8D8D8',
        trailWidth: 10,
        strokeWidth: 10,
    
        // Set default step function for all animate calls
        step: function(state, circle) {
            circle.path.setAttribute('stroke', state.color);
        }
    });
    

    to start the circle:

    circle.set(0);
    circle.animate(0.5, {
        from: {color: '#00FF00'},
        to: {color: '#FFAE00'},
        duration: 7500
    }, function(){
        circle.animate(0.99, {
            from: {color: '#FFAE00'},
            to: {color: '#FF0004'},
            duration: 10000
        });
    });
    
    opened by phara0hcom 7
  • Size incorrect in IE

    Size incorrect in IE

    It seems the height/width are around half the size they should be when viewing a circular progress bar in IE. This applies not only to my project, but also your project website's examples. Open your site in IE11 to see what I mean.

    opened by ts-Mike 7
  • show text in the middle

    show text in the middle

    can we add an api to insert text inside ProgressBar.Circle? I mean, I wan't to add the percentage inside of it without having to rely on external html+css. Thanks!

    enhancement 
    opened by luisrudge 7
  • progressbar not working in classs

    progressbar not working in classs

    When i create one progressbar like this

    this.progressbar = new ProgressBar.Circle(`#${this.id}_progressbar`, {
      strokeWidth: 9,
      trailWidth: 9,
      trailColor: '#363348',
      easing: 'easeInOut',
      duration: 1000,
      color: this.color,
    });
    
    

    everything works until I create another element in the class, if I create for example 3 progressbars then only the last one will work any ideas?

    opened by Virelox 0
  • Progress Bar, not animating on inactive tab.

    Progress Bar, not animating on inactive tab.

    I have progress bar and I am using signalR to trigger animation, It workes perfectly when I am on the tab but when the tab is inavtive it pauses the animation.

    var bar = new ProgressBar.Line("#su_progress-spinner", { strokeWidth: 4, easing: 'easeInOut', duration: 1400, color: '#1dc9b7', trailColor: '#eee', trailWidth: 1, svgStyle: {width: '100%', height: '100%'}, text: { style: { // Text color. // Default: same as stroke color (options.color) color: '#999', position: 'absolute', right: '0', top: '30px', padding: 0, margin: 0, transform: null }, autoStyleContainer: false }, from: {color: '#1dc9b7'}, to: {color: '#1dc9b7'}, step: (state, bar) => { bar.setText(Math.round(bar.value() * 100) + ' %'); } });

    opened by herryG 0
  • Progressbar.JS not loaded after AJAX refresh.

    Progressbar.JS not loaded after AJAX refresh.

    I am using te the progressbar.js plugin together with the October CMS. In October there is an option to update certain parts of a website via Ajax. In my page there is a RSS feed section that updates itself every 10 minutes. The progressbar.js plugin shows the "waiting" time until a refresh is called.

    The refresh works perfectly apart of the fact that the SVG is not recreated.

    So if i check my source code, i can see that my DIV with the ID "progressbar" is there, but empty. Though before the refresh the SVG was there.

    I tried to reset the animate to 0 and everything, but it looks like the SVG is not created. Can you suggest what i am doing wrong?

    opened by qroft 0
  • Update Shifty dependency version to have RGBA-Colors support

    Update Shifty dependency version to have RGBA-Colors support

    According to this release: https://github.com/jeremyckahn/shifty/releases/tag/v2.16.1 it would be nice to have a new progressbar.js release with this new shifty version.

    Context: https://github.com/jeremyckahn/shifty/issues/136#issuecomment-983722450

    opened by thomasfrobieter 0
  • How to change color gradient speed?

    How to change color gradient speed?

    Hi,

    this is my code :

    var bar = new ProgressBar.Line(CpuES, {
        strokeWidth: 6,
        color: '#FFEA82',
        trailColor: '#eee',
        trailWidth: 1,
        easing: 'bounce',
        duration: 4500,
        svgStyle: null,
        text: {
          value: '',
          alignToBottom: true
        },
        from: {color: '#00FF00', width: 2},
        to: {color: '#FF0000', width: 2},
        // Set default step function for all animate calls
        step: (state, bar) => {
          bar.path.setAttribute('stroke', state.color);
          var value = Math.round(bar.value() * 100);
          if (value === 0) {
            bar.setText('');
          } else {
           
            bar.setText(CpuAverageFD+'% cpu front');
          }
      
          bar.text.style.color = state.color;
        }
      });
      bar.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
      bar.text.style.fontSize = '15px';
      bar.text.style.position='relative';
      bar.text.style.top='15%';
      bar.text.style.fontWeight='bold';
      bar.animate(CpuToDisplayFD);  // Number from 0.0 to 1.0
    

    The color gradient works perfectly, however the progress bar become red (FF0000) very fast... around 30% (bar.animate(0.3)

    How can I change the speed of the gradient?

    opened by AdeeelAsif 0
  • Cannot read property 'map' of null

    Cannot read property 'map' of null

    I get this error :

    C:\Users\user\project\node_modules\shifty\dist\shifty.node.js:1091
    Uncaught TypeError: Cannot read property 'map' of null
        at getFormatChunksFrom (C:\Users\user\project\node_modules\shifty\dist\shifty.node.js:1091)
        at getFormatSignatures (C:\Users\user\project\node_modules\shifty\dist\shifty.node.js:1281)
        at tweenCreated (C:\Users\user\project\node_modules\shifty\dist\shifty.node.js:1440)
        at Tweenable._applyFilter (C:\Users\user\project\node_modules\shifty\dist\shifty.node.js:588)
        at Module.interpolate (C:\Users\user\project\node_modules\shifty\dist\shifty.node.js:1538)
        at Path._calculateFrom (C:\Users\user\project\node_modules\progressbar.js\src\path.js:152)
        at Path._resolveFromAndTo (C:\Users\user\project\node_modules\progressbar.js\src\path.js:145)
        at Path.animate (C:\Users\user\project\node_modules\progressbar.js\src\path.js:94)
        at Circle.animate (C:\Users\user\project\node_modules\progressbar.js\src\shape.js:111)
        at CircleBar.updateProgress (C:\Users\user\project\src\build_js\renderer\components\progress.js:9)
    

    When I try to animate / set a bar :

    let bar = new CircleBar("#progressbar");
    bar.updateProgress(value);
    
    opened by adriencarbonaro 0
Releases(1.0.1)
  • 1.0.1(Apr 23, 2016)

  • 1.0.0(Mar 14, 2016)

    • New documentation in http://progressbarjs.readthedocs.org/en/1.0.0/

    • Fixed and updated sauce labs tests

    • Add text.autoStyleContainer option

    • HTML string or DOM element is now possible to pass in opts.text.value or to .setText method

    • breaking: Change behavior default style options. From now on, if you define anything to opts.svgStyle or opts.text.style yourself, no default values will be used. This makes customising the styles easier in JS. If you want to only change one single style attribute, you can do it after initializing the progress bar, like this:

      var bar = new ProgressBar.Line('#container');
      bar.text.style.fontSize = '40px';
      
    • Fix https://github.com/kimmobrunfeldt/progressbar.js/issues/107

    Source code(tar.gz)
    Source code(zip)
  • 0.9.0(Aug 4, 2015)

    Contains API breaking changes compared to 0.8.x:

    • Square shape is now removed from the API. It's not very useful bar type. You can still find it from ./src/square.js, you can manually add it to your project
    • options.text.autoStyle is replaced with options.text.style. If you had autoStyle: false, you should now use options.text.style = null. That will disable all default styles. New API for style changes improves the control of inline styles.
    • Add options.svgStyle and automatically resizes to the container. width: 100%; css style is set for the SVG element.

    Other additions:

    • New shape: SemiCircle

      semicircle

    • Expose more internal modules for customization Shape and utils are now exposed. https://github.com/kimmobrunfeldt/progressbar.js/commit/ffb151d954d7486a96c2b8ed05a4648a1613f206

    • Upgrade to shifty version 1.5.0, easing can be now specified as a function.

    • Improve code consistency with linters.

    Source code(tar.gz)
    Source code(zip)
  • 0.8.1(Apr 8, 2015)

  • 0.8.0(Apr 8, 2015)

    API breaking change for step function! If you haven't used option.attachment, nothing has changed. Most likely you don't need to change anything.

    Thanks to @prodigitalson who provided fixes to step function and added a lot of tests.

    All changes:

    • API breaking change to step function:

      Before this release, Shape was passed as an attachment to Path. If you overrode the attachment, there was no way to get reference to the Shape inside step function. Before:

      step: function(state, attachment) {
          // Do step
      }
      

      Now you can always reference to the Shape or Path inside the step function. Reference to self is passed as second parameter. User's custom attachment is now passed as the third parameter After:

      step: function(state, self, attachment) {
          // self is reference to Shape or Path
          // Do step
      }            
      
    • Expose SVG path element as .path attribute for Path objects. That is consistent with Shape objects.

    • Make it possible to pass selector as a string to Path object. Earlier only direct element was accepted.

    • More tests

    Source code(tar.gz)
    Source code(zip)
  • 0.7.4(Jan 13, 2015)

    These were fixed and released fast because some functionality was broken

    • Fixed bugs when step function was initially called. value() function returns now 0 in initial step call.
    • Fix bug where two text nodes were left inside progress bar
    • Fix bug with custom easings in initial step function
    Source code(tar.gz)
    Source code(zip)
  • 0.7.3(Jan 13, 2015)

  • 0.7.2(Jan 12, 2015)

  • 0.7.1(Jan 12, 2015)

    • Call step function on initialization also
    • Fix text creation with setText if opts.text is not defined at initialization
    • When calling step in .set() method, use correct easing instead of hardcoded linear
    • Remove unnecessary step call on tween finish
    Source code(tar.gz)
    Source code(zip)
  • 0.7.0(Jan 11, 2015)

    Adds .text and .setText() to API, but is backwards compatible

    • Add text option and setText method
    • Throw better error if container does not exist
    • Small refactoring
    • Call given step function when .set() is called
    • Decrease precision of returned progressbar value
    Source code(tar.gz)
    Source code(zip)
  • 0.6.1(Dec 9, 2014)

    This changes the behavior of custom animation support, but API stays the same

    • Add trailWidth option
    • Improve custom animations support. User doesn't have to interpolate values anymore.
    • Throw error if progress bars are initialized without new keyword
    • Fix bug if empty opts was passed
    Source code(tar.gz)
    Source code(zip)
  • 0.6.0(Nov 10, 2014)

    This release contains additions and modifications to API

    • Add destroy() method
    • Add stop() method
    • Add svg attribute for built-in shapes
    • Round progress from .value() to prevent returning very small number like 1e-30
    • Add license banner to distributable files
    Source code(tar.gz)
    Source code(zip)
  • 0.5.4(Oct 26, 2014)

    This release does not change functionality of ProgressBar.

    • Change main script to point to source file instead of bundled file to prevent browserify including shifty twice.
    Source code(tar.gz)
    Source code(zip)
  • 0.5.3(Oct 26, 2014)

    This release does not change functionality of ProgressBar.

    This release was rushed and the changes should have been released same time with 0.5.4

    Source code(tar.gz)
    Source code(zip)
  • 0.5.2(Oct 26, 2014)

    This release does not change functionality of ProgressBar.

    • Removed --debug flag from Browserify command because it made debugger show incorrect lines. That happens because shifty is bundled inside final script.
    Source code(tar.gz)
    Source code(zip)
  • 0.5.1(Oct 25, 2014)

    This release does not change functionality of ProgressBar.

    • Custom UMD module definition was removed from source code and Browserify generates it instead.
    • Removed shifty from this repository and defined it as a npm dependency.
    Source code(tar.gz)
    Source code(zip)
  • 0.5.0(Oct 20, 2014)

  • 0.4.1(Oct 20, 2014)

    • Add custom animation support
    • Add references to path and trail

    There was some hassle with 0.4.0 being accidentally a branch and tag so released a new 0.4.1 just in case.

    Source code(tar.gz)
    Source code(zip)
  • 0.2.1(Oct 13, 2014)

  • 0.2.0(Oct 13, 2014)

    This is the first sensible release which supports all major browsers. CSS3 transitions had to be switched to JS animations for better browser support.

    Source code(tar.gz)
    Source code(zip)
Owner
Kimmo Brunfeldt
Tech, design and tiny perfect details. Software at @aiven.
Kimmo Brunfeldt
Material Progress —Google Material Design Progress linear bar. By using CSS3 and vanilla JavaScript.

MProgress.js Google Material Design Progress Linear bar. It uses CSS3 and vanilla JavaScript which doesn't depend on any other libraries. Types and pr

gc 1.5k Oct 10, 2022
ProgressJs is a JavaScript and CSS3 library which help developers to create and manage progress bar for every objects on the page.

ProgressJS ProgressJs is a JavaScript and CSS3 library which helps developers create and manage progress bars for every object on the page. How To Use

usablica 2.4k Nov 14, 2022
Automatically add a progress bar to your site.

PACE An automatic web page progress bar. Demo Documentation Include pace.js and the theme css of your choice on your page (as early as is possible), a

null 15.5k Nov 23, 2022
Multiple file upload plugin with image previews, drag and drop, progress bars. S3 and Azure support, image scaling, form support, chunking, resume, pause, and tons of other features.

Fine Uploader is no longer maintained and the project has been effectively shut down. For more info, see https://github.com/FineUploader/fine-uploader

Fine Uploader 8.2k Nov 20, 2022
Dropzone is an easy to use drag'n'drop library. It supports image previews and shows nice progress bars.

Dropzone is a JavaScript library that turns any HTML element into a dropzone. This means that a user can drag and drop a file onto it, and Dropzone wi

Dropzone 17k Nov 26, 2022
Very lightweight progress bars. No jQuery

Very lightweight progress bars (~699 bytes gzipped). Compatibility: iE7+ and the rest of the world Demo See nanobar.jacoborus.codes Installation Downl

Jacobo Tabernero 2.9k Nov 12, 2022
Slim progress bars for anywhere you want to use

qier-progress is a progress bar. It can be used for some watting time like jump links, request data, and load or upload files and images to give us feedback and reduce our anxiety. Also if you have used nprogress, then you must know what I am talking about ~

chen xin 370 Nov 5, 2022
A slick loader to use during your AJAX calls or data processing

Slick Loader A slick loader to use during your AJAX calls or data processing Doc Installation Simply import slick-loader into your HTML. <link rel="st

Zenoo 1 Jan 21, 2022
Material Progress —Google Material Design Progress linear bar. By using CSS3 and vanilla JavaScript.

MProgress.js Google Material Design Progress Linear bar. It uses CSS3 and vanilla JavaScript which doesn't depend on any other libraries. Types and pr

gc 1.5k Oct 10, 2022
A set of flat and 3D progress button styles where the button itself serves as a progress indicator

A set of flat and 3D progress button styles where the button itself serves as a progress indicator. 3D styles are used for showing the progress indication on one side of the button while rotating the button in perspective.

Codrops 608 Oct 19, 2022
📈 A small, fast chart for time series, lines, areas, ohlc & bars

?? μPlot A small (~35 KB min), fast chart for time series, lines, areas, ohlc & bars (MIT Licensed) Introduction μPlot is a fast, memory-efficient Can

Leon Sorokin 7.5k Nov 24, 2022
Responsive Tabs is a jQuery plugin that provides responsive tab functionality.

Responsive Tabs is a jQuery plugin that provides responsive tab functionality. The tabs transform to an accordion when it reaches a CSS breakpoint. You can use this plugin as a solution for displaying tabs elegantly on desktop, tablet and mobile.

Jelle Kralt 535 Nov 9, 2022
ProgressJs is a JavaScript and CSS3 library which help developers to create and manage progress bar for every objects on the page.

ProgressJS ProgressJs is a JavaScript and CSS3 library which helps developers create and manage progress bars for every object on the page. How To Use

usablica 2.4k Nov 14, 2022
Bookstore CMS React Front-End to display a list of books, categorize it, add and remove books and update your reading progress

Bookstore REACT app to manage your books Build an app to display a list of books, categorize it, add and remove books and update your reading progress

Eapen Zacharias 3 Aug 19, 2022
To-Do list a web app for tracking personal progress through the day. Users can input a list of tasks and mark them as completed once they are done. Built with JavaScript and Webpack

To-do-List-Project To Do List Project Description. This project creates a simple HTML list of To Do tasks. It was built using webpack and served by a

Olawale Olapetan 7 Jul 8, 2022
This application allows you to create a list to keep tracks of the books you are reading and check the progress for each book.

Bookstore This is an application built to track the books you are reading and the progress you have made for each book! Additional description about t

Santiago Velosa 4 Feb 27, 2022
CLI Progress Bar implemented in NodeJS to track Time, ETA and Steps for any long running jobs in any loops in JS, NodeJS code

NodeJS-ProgressBar CLI Progress Bar for NodeJS and JavaScript to track Time, ETA and Steps for any long running jobs in any loops in JS, NodeJS code D

Atanu Sarkar 5 Nov 14, 2022
Habitapp is a simple app that helps you build positive habits, measure progress and achieve your goals

habitapp Habitapp is a simple app that helps you build positive habits, measure progress and achieve your goals. ✨ Features Working without registrati

null 6 Sep 11, 2022