zen
DocumentationPlayground
Getting started
IntroductionInstallationUsage Guide
ColorsFontsSpacingBordersShadowsBreakpointsThemesCustomization
BoxFlexboxGridContainer
TextHeadingCodeBlockquote
Page headerAspect ratioResizableScroll areaSeparator
Overview
AutocompleteCheckboxCheckbox groupComboboxDate pickerInput groupNumber fieldOTP FieldPassword fieldRadio groupSearch fieldSelectSliderSwitchText fieldToggleToggle group
BreadcrumbsButtonButton groupCommandContext menuHover triggerLoading buttonMenuMenubarNavbarPaginationTabsToolbarTheme buttonTheme switcher
AlertAlert dialogConfirmation dialogDialogDrawerEmptyLoadingMeterModalPopoverPreview cardProgress barProgress circleSheetSkeletonStatus lightToastTooltip
AccordionAvatarBadgeCalendarCarouselCollapsibleData cardData tableIconImageKbdListTableTag group
Feedback & Status

Progress Bar

A horizontal bar that visually represents the completion status of a task or process. Supports determinate progress with percentage values and optional value labels.

x

Show percentage#

25%x

Component props#

NameTypeDescription
valuenumberCurrent progress value
minValuenumberMinimum value (default: 0)
maxValuenumberMaximum value (default: 100)
showPercentagebooleanShows percentage text
PreviousPreview cardNextProgress circle
On this page
Show percentageComponent props
Powered by shiso