ProgressBar/V1

A progress bar element with customizable fill percentage, colors, and optional text label.

Basic Structure

JSON

{
  "type": "ProgressBar/V1",
  "id": "6Z-Prog-0",
  "version": 0,
  "parentId": "6Z-Parent-0",
  "fractionalIndex": "a0",
  "params": {
    "progress": 75,
    "progress-text": "75% Complete",
    "width--unit": "%"
  },
  "attrs": {
    "style": {
      "width": 100
    }
  }
}

Parameters

Parameter	Type	Description
`progress`	number	Fill percentage (0-100)
`progress-text`	string	Text displayed on or near the bar
`show_text_outside`	string	"true" to show text outside the bar

Styling

Customize the progress bar appearance with selectors:

JSON

{
  "type": "ProgressBar/V1",
  "params": {
    "progress": 59,
    "progress-text": "Almost Complete!",
    "show_text_outside": "true",
    "width--unit": "%"
  },
  "attrs": {
    "style": { "width": 76 }
  },
  "selectors": {
    ".progress": {
      "attrs": {
        "data-skip-shadow-settings": "false",
        "data-skip-corners-settings": "false",
        "style": { "border-radius": 76 }
      },
      "params": {
        "--style-background-color": "rgb(203, 95, 95)",
        "border-radius--unit": "px"
      }
    },
    ".progress-bar": {
      "params": {
        "--style-background-color": "rgb(99, 143, 208)",
        "height--unit": "px"
      },
      "attrs": {
        "style": { "height": 38 }
      }
    },
    ".progress-label": {
      "params": { "font-size--unit": "px" },
      "attrs": { "style": { "font-size": 16 } }
    },
    "& > .progress-label": {
      "attrs": { "style": { "color": "rgb(128, 42, 42)" } }
    }
  }
}

Available Selectors

Selector	Purpose
`.progress`	The outer track container (background color)
`.progress-bar`	The filled portion (fill color, height)
`.progress-label`	The text label styling
`& > .progress-label`	Direct child label (for outside text)

With Inset Shadow

Add an inset shadow for a recessed effect:

JSON

{
  "selectors": {
    ".progress": {
      "attrs": {
        "data-skip-shadow-settings": "false"
      },
      "params": {
        "--style-box-shadow-style-type": "inset",
        "--style-box-shadow-distance-x": 0,
        "--style-box-shadow-distance-y": 2,
        "--style-box-shadow-blur": 4,
        "--style-box-shadow-spread": 0,
        "--style-box-shadow-color": "rgba(0, 0, 0, 0.2)"
      }
    }
  }
}

Supported Features

Feature	Supported
Background	Yes
Border	Yes
Shadow	Yes
Corners	Yes