#progressbar.js

Build beautiful Progress Bars for your Project with ProgressBar.js

Everyone knows about Progress Bars, they are a medium using which you can track the progress of your doings. Building a progress bar from scratch is not any easy when you’re a newbie to the field, it becomes a tough task to complete. But there are solutions for all your problems.

Here comes Progressbar.js – A lightweight and very handy javascript library that builds responsive and slick progress…

New Post has been published on http://www.htmluse.com/progressbar-js-beautiful-and-responsive-progress-bars/

Progressbar.js - Beautiful and responsive progress bars

Download Demo

This jquery plugin Progressbar.js – Beautiful and responsive progress bars with animated SVG paths.

it’s easy to create arbitrary shaped progress bars. This library provides a few built‑in shapes like Line, Circle and Square but you can also create your own progress bars with Illustrator or any vector graphic editor.

ProgressBar.js is lightweight, MIT licensed and supports all major browsers including IE9+.

1. INCLUDE JS FILE

2. HTML

3. JAVASCRIPT

Line

Simple example of animating a built‑in Line progress bar. Line width can be set by specifying container’s height with CSS.

var element = document.getElementById(‘example-line-container’); var line = new ProgressBar.Line(element, color: “#FCB03C”, trailColor: “#aaa” );

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

Circle

Simple example of animating a built‑in Circle progress bar.

var element = document.getElementById(‘example-circle-container’); var circle = new ProgressBar.Circle(element, color: “#FCB03C”, strokeWidth: 2, fill: “#aaa” );

circle.animate(1, function() circle.animate(0); )

Clock

Example of useless clock. Positioning text in the center of progress bar is a bit troublesome sometimes.

var element = document.getElementById(‘example-clock-container’); element.innerHTML = ‘

‘; 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);

Custom shaped path

Example of animating path inside a complex SVG scene. If you need to do more complicated animations, use SVG animation library like Snap.svg.

var container = document.getElementById(‘example-custom-container’); container.innerHTML = ‘‘;

var scene = document.getElementById(‘scene’); scene.addEventListener(‘load’, function() var path = new ProgressBar.Path(scene.contentDocument.querySelector(‘#asterism-path’), duration: 1000 );

path.animate(1, function() path.animate(0); );