Progress element
The <progress> element is a element that is used to display a progressbar. It is an element that works well with the block attribute to give it even more functionality. For example aligning the progressbar (shown as below).
Attributes
Most attributes correspond to their HTML equivalents, providing a familiar approach for those accustomed to HTML styling. Some minor changes due to the way it shows multiple colors and has many small component.
| Attribute Name | Required | Type | Description |
|---|---|---|---|
| backgroundColor | No | Hex value | Sets the background color of the element. |
| x | No | Number | Sets the horizontal position of the element (left position in CSS). |
| y | No | Number | Sets the vertical position of the element (top position in CSS). |
| width | No | Number/String | Sets the width of the element, in pixels or percentage. |
| height | No | Number/String | Sets the height of the element, in pixels or percentage. |
| marginTop | No | Number | Sets the top margin of the element in pixels. |
| marginBottom | No | Number | Sets the bottom margin of the element in pixels. |
| marginLeft | No | Number | Sets the left margin of the element in pixels. |
| marginRight | No | Number | Sets the maximum width the element can occupy, in pixels or percentage. |
| textColor | No | Hex value | Defines the color of the text inside the element. |
| foregroundColor | No | Hex value | Specifies the color of the foreground of the element (used for progress bar’s filled color or similar). |
| display | No | String | Determines the display style of the element. The only allowed value is flex, which enables a flexible box layout design. Such a layout provides an efficient way to lay out, align, and distribute space among items in a container, even when their size is unknown or dynamic. |
| value | No | Number/String | Sets the current value of the progress element. This can be used for showing progress. |
| max | No | Number/String | Sets the maximum value of the progress element. |
| min | No | Number/String | Sets the minimum value of the progress element. |
| title | No | Number/String | Sets the text value shown inside of the progress element. |
Examples
Progress element as regular
It shows as a horizontal line with 100% width. Height set to default and the default colors of the environment.
<bml><progress/></bml>
Result
Progress element that uses different types of attributes
The following progress element shows the different types of attributes combined. This shows what the progress element can achieve.
It shows a backgroundColor of Red and the bar itself is Blue. The title it has is "Progressbar" with a small width of 40%. height of 20px and a margin at the top. It also has a flex display with a max and minimum set. Value is set to 10 to show it is not half way filled. Text color is also changed to green.
<bml>
<progress backgroundColor="#FF0000" foregroundColor="#0000FF" title="Progressbar" width="40%" height="20" marginTop="20" display="flex" max="20" value="10" min="5" textColor="#00FF00"/>
</bml>
Result
