Skip to main content

ProgressBar

A basic progress indicator. This should be used for longer or more detailed loading processes. For shorter loading processes, consider using a LoadingDots component.

Dark Light
Dark Light

Pass a number representing the current progress into the Value prop. You can optionally pass a number representing the maximum value into the Max prop, which defaults to 1 if not provided. The Value prop should be between 0 and Max. For example: 

local function MyComponent()
	return React.createElement(StudioComponents.ProgressBar, {
		Value = 5, -- loaded 5 items
		Max = 10, -- out of a total of 10 items
	})
end

By default, the progress bar will display text indicating the progress as a percentage, rounded to the nearest whole number. This can be customized by providing a prop to Formatter, which should be a function that takes two numbers representing the current value and the maximum value and returns a string to be displayed. For example: 

local function MyComponent()
	return React.createElement(StudioComponents.ProgressBar, {
		Value = 3,
		Max = 20,
		Formatter = function(current, max)
			return `Loaded {current} / {max} assets...`
		end,
	})
end

By default, the height of a progress bar is equal to the value in Constants.DefaultProgressBarHeight. This can be configured via props.

Types​

Props​

Component Props
</>
interface Props {
Value: number
Max: number?
Formatter: ((
value: number,
max: number
) → string)?
}
Show raw api
{
    "functions": [],
    "properties": [],
    "types": [
        {
            "name": "Props",
            "desc": "",
            "fields": [
                {
                    "name": "...",
                    "lua_type": "CommonProps",
                    "desc": ""
                },
                {
                    "name": "Value",
                    "lua_type": "number",
                    "desc": ""
                },
                {
                    "name": "Max",
                    "lua_type": "number?",
                    "desc": ""
                },
                {
                    "name": "Formatter",
                    "lua_type": "((value: number, max: number) -> string)?",
                    "desc": ""
                }
            ],
            "tags": [
                "Component Props"
            ],
            "source": {
                "line": 61,
                "path": "src/Components/ProgressBar.luau"
            }
        }
    ],
    "name": "ProgressBar",
    "desc": "A basic progress indicator. This should be used for longer or more detailed loading processes.\nFor shorter loading processes, consider using a [LoadingDots] component.\n\n| Dark | Light |\n| - | - |\n| ![Dark](/StudioComponents/components/progressbar/dark.png) | ![Light](/StudioComponents/components/progressbar/light.png) |\n\nPass a number representing the current progress into the `Value` prop. You can optionally pass a \nnumber representing the maximum value into the `Max` prop, which defaults to 1 if not provided. \nThe `Value` prop should be between 0 and `Max`. For example:\n\n```lua\nlocal function MyComponent()\n\treturn React.createElement(StudioComponents.ProgressBar, {\n\t\tValue = 5, -- loaded 5 items\n\t\tMax = 10, -- out of a total of 10 items\n\t})\nend\n```\n\nBy default, the progress bar will display text indicating the progress as a percentage,\nrounded to the nearest whole number. This can be customized by providing a prop to `Formatter`,\nwhich should be a function that takes two numbers representing the current value and the maximum value\nand returns a string to be displayed. For example:\n\n```lua\nlocal function MyComponent()\n\treturn React.createElement(StudioComponents.ProgressBar, {\n\t\tValue = 3,\n\t\tMax = 20,\n\t\tFormatter = function(current, max)\n\t\t\treturn `Loaded {current} / {max} assets...`\n\t\tend,\n\t})\nend\n```\n\nBy default, the height of a progress bar is equal to the value in [Constants.DefaultProgressBarHeight].\nThis can be configured via props.",
    "source": {
        "line": 44,
        "path": "src/Components/ProgressBar.luau"
    }
}