RoundProgressBar

JavaScript Library

Build your own progress bar:

General

Thickness

Size

Color

Enable color gradient

Gradient color 1

Gradient color 2

Gradient color 3

Background color

Round edges

Value

Max

Min

Reverse value

Text

Show text

Text color

Text size

Symbol

Text font

Animation

Animate start

Animate start speed

Animate value

Animate without return

Animate value speed

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

<canvas class="rpb" id="myProgressBar" rpb_color="#006699" rpb_backgroundcolor="#cccccc" rpb_textcolor="#cccccc" rpb_textsize="75"></canvas>

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