Customize skin-custom - preview

Add Rectangle Add Circle Add Text
Position
Width
Height

Margin Top
Margin Left
Margin Right
Margin Bottom
Animation
Animation Time
Animation Time in ms - 1000 ms = 1 second
Percent
Percent on which the animation goes - from 1 to 100
Animation Number
You can have a progress number which increments as the progress goes on. You insert it via {{percmaxnr}} in the text block ideally.
Animation Starts on ...
init - page load, scroll - when the page scrolls to it's location.

You can have variables that are replaced dinamically while the progress bars animate. Might be overwhelming to understand them all but you can search the examples for easily understanding. A cheatsheet can be found below

{{perc}} - outputs the current percentage, for exaample if the progress is at 47% it will output 47%
{{perc-decimal}} - outputs the current percentage in decimal form, for example if the progress is at 47% it will output 0.47
{{perc100-decimal}} - it's the same as perc-decimal but the difference is it will go up until 1 even if the Percent is set to lower then 100%
{{center}} - it will center the element, currently available only for the Top propery
{{percmaxnr}} - outputs the current number relative the percent, you set the number in the Animation Number field. For example if progress is at 47% and the Animation Number is 500 - the output will be 235

Preview Examples




version 1.0

Output / you can include this in your html