Skip to content
progress
AutoXXS (320px)XS (375px)SM (640px)MD (768px)LG (1024px)XL (1280px)XXL (1536px)
SketchMaterialiOSTamagui
DataInjectionKeyPatternsServiceTransactionProcessResearchProductQualityPerformanceSpecDomainFunctionTechnologyArchitectureConfigMiddlewareDataDatabaseDrizzleMigrationModelop-sqliteSchemaSQLState ManagementDraftKeystoneMergePatchPatchesPersistenceReactiveRedoStoreUndoTestingDeviceFactoryIsolationTypeScriptZodTopicsCommunicationBidsNVCDesignDesign ImplicationsEducationPedagogyFoundationsPsychologyAttachmentFloodingRelatingAuthentic RelatingUIEditorReact Native

progress

Fragment reference progress
tags
ui

Visual completion indicators. Two variants: progress-bar (linear) and progress-ring (circular).


progress-bar

Linear progress indicator. Shows the status of an ongoing operation.

Attributes

NameTypeDefaultDescription
valuenumber0Current progress percentage (0–100).
indeterminatebooleanfalseSets indeterminate state when progress cannot be determined.
labelstring-Accessible label.

progress-ring

Circular progress indicator.

Attributes

NameTypeDefaultDescription
valuenumber0Current progress percentage (0–100).
sizenumber-Size in pixels.

progress (DSL)

DSL alias for generic visual completion state.

AttributeTypeDefaultDescription
labelstring-Descriptive text.
valuenumber0Current progress.
maxnumber100Target value.