Biofarma | Bind UI

Progress Bar

Progress Bar component is a visual indicator that displays the progression of a task or process. It provides users with a clear visual representation of the completion status, making it easier to track and understand ongoing activities.

Type	Resource
Design	Figma
Mobile	Mobile Storybook
Code	Gitlab

Usage

import id.co.biofarma.binduiandroid.components.progressbar.ProgressBar

ProgressBar(
  (label = 'Label'),
  (type = 'linear'),
  (value = 75),
  (size = 'md'),
  (showInfo = false),
  (showPercentage = true)
);

Examples

Type (optional)

Use type line or circle to select a progress bar.

Progress Bar Example Type

Size (optional)

Use size 2xs, xs, sm, md, lg, or xl to determine the size of the progress bar.

Progress Bar Example Size

Mode (optional)

Use mode to use dark or light mode.

Progress Bar Example Mode

Props

Props	Required	Default	Type	description
id	false	-	`string`	A unique identifier for the progress bar.
label	false	-	`string`	The label text for the progress bar.
type	false	`line`	`line` , `circle`	The type variant of the progress bar (`line`, `circle`).
size	false	`md`	`xs`, `sm`, `md`, `lg`, `xl`	The size of progress bar component (`xs`, `sm`, `md`, `lg`, `xl`).
maxValue	false	`100`	`int`	Maximal value information from the progress bar.
showInfo	false	`false`	`boolean`	If true, the progress information will be assigned to the progress bar.
style	false	-	`Modifier`	Custom styles for the progress bar component.
value	false	`0`	`int`	Value information from the progress bar.
variant	false	`primary`	`primary`	The visual color variant of the progress bar.
showPercent	false	`true`	`boolean`	If false, the percentage information will be omitted from the progress bar.

Loading Skeleton