Percentage in Line

The PacemProgressbarElement helps in rendering a percentage in graphical linear form.

The percentage must be provided in a normalized value [0-100].

{ "display": { "name": "", "cssClass": ["pacem-grid", "form-minimal", "grid-nospace", "grid-small-rowgap"] }, "props": [ { "prop": "size", "type": "enumeration", "display": { "name": "change size", "cssClass": ["pacem-cell", "cols-xl-6"] }, "extra": {"enum": [ {"caption": "large", "value": "large" }, {"caption": "default", "value": "default" }, {"caption": "small", "value": "small" }, {"caption": "smaller", "value": "smaller" }, {"caption": "tiny", "value": "tiny" }, {"caption": "thin", "value": "thin" } ]} }, { "prop": "track", "type": "boolean", "display": { "name": "show trackbar", "cssClass": ["pacem-cell", "cols-6", "cols-xl-3"], "ui": "switcher" } }, { "prop": "caption", "type": "boolean", "display": { "name": "show caption", "cssClass": ["pacem-cell", "cols-6", "cols-xl-3"], "ui": "switcher" } }, { "prop": "captionPos", "type": "enumeration", "display": { "name": "caption position", "cssClass": ["pacem-cell"] }, "extra": {"enum": [ {"caption": "top", "value": "top" }, {"caption": "right", "value": "right" }, {"caption": "bottom", "value": "bottom" }, {"caption": "left", "value": "left" } ], "dependsOn": [{"prop": "caption", "value": true, "hide": true}]} } ] }