* valueLabel: the label that must be shown as the progress value. It can be a simple text or a markup fragment. The label can contain "markers" in the form "%1", "%2"... that will be substituted with the value of the corresponding series (for example: "perc 1: %1, perc 2: %2"). If not specified, the progress percentage will be shown.
* style: can be "standard" (default), "thin", "radial", "semicircle" o "custom"
* width: determines the width of the whole component. If not specified (or set to "auto" or "100%"), the component will occupy the full width of its parent.
* height: determines the height of the component. If not specified, it defaults to 14px for standard progressbars, 1px for thin progressbars.
* thickness: used only for radial progress bars. It determines the thickness of the bar as a unitless number between 0 and 50 (corresponding to the ray of the circle).
* textSize: the size of the font (in percentage) for the progression value (default: 30 for thin progressbars, 70 for default progressbar, 150 for radial)
* addBackground: determines if a further bar should be added as background to the value bar. Default true.
* bgColor: if addBackground is true, specifies the color of the background bar
* bgFillColor: available only for "radial" and "semicircle" bars. If addBackground is true, specifies the color of the "inner circle" of the progress bar.
* labelColor: specifies the color of the label.
* invLabelColor: specifies the "inverted" label color.
* stackSeries: currently available for "radial" and "semicircle" styles only. If true (default), series will be stacked one after the other. If false, series will be rendered as independent, concentrical arcs.
* margin: currently used only for radial non-stacked bar. Determines the space between the series bars.
* thresholds: list (array) of objects that define which color apply to the progress in relation with the variation of the series value.
* cls: css class to apply to the main element.
* rx, ry: horizontal and vertical border radius (for linear progress bars). If ry is not specified, it defaults to rx.
* fillDirection: direction of "filling". Can be one of "l2r" (left to right [default]), "r2l" (right to left), "t2b" (top to bottom) o "b2t" (bottom to top).
* labelAlignX: alignment of the label along the "x" axis. Can be one of "center" (default), "left", "right", "leftOf", "rightOf".
* labelAlignY: alignment of the label along the "y" axis. Can be one of "middle" (default), "top", "bottom", "above", "below".
* pathFn: used only for custom progress bars. It defines a function that must return the svg path that corresponds to the shape of the progress bar. The function receives 2 parameters: the width and the height of the viewbox, to allow scaling the path values to the actual viewbox.

updateSeries(series): update all of the series. Since the "series" property is reactive, if you are using the component in a Svelte app, you can simply bind to it and change its value as needed.

updatePerc(perc, seriesId = 0): update the specified series progress percentage. Again, since the "series" property is reactive, if you are using the component in a Svelte app, you can simply bind to it and change its value as needed.

$3

Within a svelte app, you can add a subcomponent to a radial progress bar:

//Linear progress as a Svelte component

//Linear progress with two series with vanilla js
new ProgressBar({
target: document.getElementById('pb_container'),
props: {
series: [40, 25]
}
});

//Linear progress with two series as a Svelte component

//Linear progress with "thin" style and two series
new ProgressBar({
target: document.getElementById('demo3'),
props: {
style: 'thin',
series: [30, 15]
}
});

//Custom progress bar
style='custom'
series={[70]}
path="m 99.999994,28.641477 c 0,26.036253 -23.181375,32.218477 -49.999995,47.14281 C 25.522677,62.948324 0,54.67773 0,28.641477 10e-8,2.6052245 24.031722,-6.9568368 50.598798,6.1131375 78.0152,-7.6240828 99.999994,2.6052245 99.999994,28.641477 Z"/>

//Semicircular progress bar
new ProgressBar({
target: document.getElementById('demo3'),
props: {
style: 'semicircle',
series: [30]
}
});

//Or...

//Radial progress bar with single series and thresholds
new ProgressBar({
target: document.getElementById('pb_container'),
props: {
style: 'radial',
series: [80],
thickness: 10,
thresholds: [
{
till: 50, //Color stays red from 0% to 50%
color: '#800000'
},
{
till: 100, //Color goes green from 51% to 100%
color: '#008000'
}
]
}
});