for all the people who do not have the time.. 😜
// options
var options = {
color : "#09b1ba", // color of the Progress bar.
bgColor : "#efefef", // color background of the Progress bar
speed : 0.3, // speed of animation. ( unit in secondes )
wrapper : ".wrapper", // the wrapper who append ProBar. if use class => ".class" ,if use id => "#id"
finishAnimation : false, // default "true", this option give you a animation at the end "100%".
classNameBar : "proBar", // change a class to a custom class ( for Css ).
wrapperId : "wrapperProBar", // change a wrapper id for a custom Css.
height:10, // give a height to Probar.
rounded : { // use it to round Corners of Probar.
topLeft : 25,
topRight : 25,
bottomLeft : 25,
bottomRight : 25
},
roundedInternal : { // use it to round Corners of Probar Internaly.
topLeft : 25,
topRight : 25,
bottomLeft : 25,
bottomRight : 25
}
};
// instantiate
var probar = new ProBar(options);
// use it.
probar.goto(25);
// all configuration.
probar.setColor("#2980b9"); // change color of ProBar.
probar.setWrapperColor("#ecf0f1"); // change background color of ProBar.
probar.setSpeed(3000); // change Speed to 3 secondes.
probar.goto(100); // reach 100%.
probar.goto(100,2000); // reach 100% in 2 secondes
probar.setFinishAnimation(false); // remove a finish animation.
probar.setHeight(15); // set Height to 15px.
probar.setRounded(15,15,15,15); // change Border radius of Probar. (topLeft, topRight, bottomLeft, bottomRight);
probar.setRoundedInternal(15,15,15,15); // change Border radius of Probar Internel. (topLeft, topRight, bottomLeft, bottomRight);