DailyJS

Make Slicker Progress Bars with ProgressBar.js

Alex R. Young

Subscribe

@dailyjs

Facebook

Google+

libraries ui design

Make Slicker Progress Bars with ProgressBar.js

Posted by Alex R. Young on .
Featured

libraries ui design

Make Slicker Progress Bars with ProgressBar.js

Posted by Alex R. Young on .

ProgressBar.js

Kimmo Brunfeldt sent in ProgressBar.js (GitHub: kimmobrunfeldt / progressbar.js, License: MIT, Bower: progressbar.js), a library for creating responsive progress bars. It uses animated SVG paths, so the results look very clean and cool.

The library has some built in shapes: Line, Circle, and Square. You can provide properties that are used to style the elements:

var element = document.getElementById('example-line-container');

var line = new ProgressBar.Line(element, {  
  color: '#FCB03C',
  trailColor: '#aaa'
});

line.animate(1, function() {  
  line.animate(0);
});

If you want to include a number in the progress bar, then you can just set the text of a node. There's a clock example in the documentation that does this:

var element = document.getElementById('example-clock-container');  
element.innerHTML = '<header id="clock-seconds"></header>';  
var textElement = document.getElementById('clock-seconds');

var seconds = new ProgressBar.Circle(element, {  
  duration: 200,
  color: '#FCB03C',
  trailColor: '#ddd'
});

setInterval(function() {  
  var second = new Date().getSeconds();
  seconds.animate(second / 60, function() {
    textElement.innerHTML = second;
  });
}, 1000);

You can also add arbitrary shapes with ProgressBar.Path. There's a really nice example that uses the Plough (Big Dipper) and connects each star together.

Part of the magic behind the animation in ProgressBar.js is powered by Shifty. This is a tweening engine created by Jeremy Kahn which can "tween" numbers or even CSS strings.

I really like the look of the progress bars Kimmo has used in the documentation, so I expect these will start appearing on websites soon.