Skip to content

ProgressBlock

Display the progress indicator block based on dispatch data.

  • tile:progress-block
  • title
  • body: display content inside the block
  • chart: show progress or not
  • rewrite: rewrite the style based on dispatch/dataSource data
  • classes
  • styles

Example

 {
  "tile": "progress-block",
  "body": "{data.completion} Funded",
  "chart": true,
  "classes": {
    "widget": "text-left font-size-120 font-weight-bold",
    "root": "px-2"
  },
  "rewrite": [
    {
      "target": "styles",
      "template": "{data.completion}",
      "to": "inner.width"
    }
  ],
  "styles": {
    "chart": {
      "border": "5px solid #111C45",
      "marginBottom": "5px",
      "padding": "5px 5px",
      "width": "100%",
      "position": "relative",
      "borderRadius": "5px",
      "textTransform": "uppercase",
      "color": "#111C45",
      "fontFamily": "\"Noir Pro Bold\", sans-serif"
    },
    "inner": {
      "backgroundColor": "#111C45",
      "color": "#fff",
      "width": "10%",
      "padding": "5px 5px",
      "position": "absolute",
      "left": 0,
      "top": 0,
      "overflow": "hidden",
      "margin": "-1px",
      "height": "calc(100% - -2px)"
    }
  }
}