Progress Bars

Progress Bar:

To create a progress bar as an icon or tile-background, just use the following code as image-name:

|data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -5 110 110"><rect y="40" width="100" height="20" rx="8" ry="8" fill="grey" stroke-width="0" ></rect><rect y="40" width="{javascript.0.Test.LEVEL}" height="20" rx="8" ry="8" fill="red" stroke-width="0" ></rect></svg>

• javascript.0.Test.LEVEL has to be replaced by your datapoint
• The colors grey and red may be replaced by the colors you like

Circle Progress Bar:

To create a rounded progress bar as an icon or tile-background, just use the following code as image-name:

|data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 40 40"><path fill="none" stroke="grey" stroke-width="4" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"></path><path fill="none" stroke="red" stroke-width="4" stroke-linecap="round" stroke-dasharray="{javascript.0.Test.LEVEL}, 100" transform="rotate(-90 18 18)" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"></path></svg>

• javascript.0.Test.LEVEL has to be replaced by your datapoint
• The colors grey and red may be replaced by the colors you like
• To change the starting-point, change "rotate(-90 18 18)". For example if you replace "-90" with "0", the circle starts at the top instead of left (= rotated -90°).