Starting point

[popoydotcom]

Starting point

[kimmobrunfeldt]

You'd have to create your own custom shape for that, you could e.g. copy https://github.com/kimmobrunfeldt/progressbar.js/blob/master/src/circle.js

[kimmobrunfeldt]

this._pathTemplate contains the shape of the circle

[popoydotcom]

thank you. will look into this

[kimmobrunfeldt]

I can try to provide an example

[popoydotcom]

yes if its no trouble :), im a bit of amateur when it comes to understanding codes

[kimmobrunfeldt]

I have to make some additions to the core API so it's possible to easily add custom shapes. In the meanwhile, you could also rotate your progress bar by 180deg: http://jsfiddle.net/1s6149mk/

[popoydotcom]

omg thank you will look into this.

[kimmobrunfeldt]

The core API exposes Shape and internal utils module in the next release, they can be used to create new shapes as easily as progressbar.js does internally. See example: http://jsfiddle.net/mtLjzmoy/. I have currently the next release built in pre-release/0.9.0 branch.

Line is the easiest built-in shape to check how Shape and utils are used internally, https://github.com/kimmobrunfeldt/progressbar.js/blob/master/src/line.js.

JS in the fiddle:

// Triangle.js
// --------------------------------------------------
var Shape = ProgressBar.Shape;
var utils = ProgressBar.utils;

var Triangle = function Triangle(container, options) {
    this._pathTemplate = 'M 50,{center} L 100,{bottomCenter}' +
                         ' L 0,{bottomCenter} L 50,{center}';
    Shape.apply(this, arguments);
};

Triangle.prototype = new Shape();
Triangle.prototype.constructor = Triangle;

Triangle.prototype._pathString = function _pathString(opts) {
    return utils.render(this._pathTemplate, {
        center: opts.strokeWidth / 2,
        bottomCenter: 100 - opts.strokeWidth / 2
    });
};

Triangle.prototype._trailString = function _trailString(opts) {
    return this._pathString(opts);
};
// --------------------------------------------------


// Using Triangle
var bar = new Triangle('#container', {
    color: '#FCB03C',
    strokeWidth: 1
});

bar.animate(1.0);  // Number from 0.0 to 1.0

[clarklight]

For the rotation, is there possible to have the text not rotated?

[kimmobrunfeldt]

The rotation issue is solved here: #70