RoundProgressBar

JavaScript Library

Build your own progress bar:

General
id
Thickness
Size

enable ColorGradient

gradient Color1
gradient Color2
gradient Color3
background Color
round Edges
Value
Value
Max
Min
reverse Value
Text
show Text
text Color
text Size
symbol
text Font
Animation
animate Start
animateStartSpeed
animate Value
animate without Return
animateStartSpeed

Import library:

<script src="https://alwinschuster.at/rpb.min.js"></script>

Add your progress bar [HTML]:

<canvas class="rpb" ></canvas>

Change attributes [JS]:

var yourBar = rpb_getInstanceFromProgressBar("myProgressBar"); //get Progress Bar from id
yourBar.value = 45; //set value to 45
...
yourBar.draw(); //draw bar [important!]

Programming language

JavaScript

Design language

HTML, CSS

Release date

November 2017