Progress Bar Reference

Reference for Progress Bar Reference in Web Framework References. Key properties: ID, Class, Label, Width.

Single progress indicator bar inside a progress container. Place inside Progress; set value/label and optional striped/animated/variant styling.

Inspector Property Groups

Property	Type	Details
ID	text	Optional unique identifier for this element. Sets the element's id attribute. Keep IDs unique per page (useful for anchors, label for targets, and JavaScript hooks). Bootstrap docs: Introduction Attribute: id
Class	text	Adds raw class names to the element. Adds text directly to the class attribute. Use this for custom utility classes or project-specific overrides. Separate multiple classes with spaces. Bootstrap docs: Utilities API Attribute: class
Label	text	Progress bar label text. Sets text content displayed inside the progress bar. Use this to show percentage or status, but keep contrast/readability in mind. Bootstrap docs: Progress
Width	css_size	Progress bar width. Controls the width (filled portion) of the progress bar. This is often derived from the current value, but some rules expose it directly. Bootstrap docs: Progress
Back Color	color_group	Options: text-bg-primary, bg-primary, bg-primary-subtle, text-bg-secondary, bg-secondary, bg-secondary-subtle
Striped	boolean	Striped progress bar. Adds stripes to the progress bar. Uses progress-bar-striped . Bootstrap docs: Striped

Property	Type	Details
Now	text	Current progress value. Defines the current progress value. This typically maps to aria-valuenow and/or width percentage depending on the rule. Bootstrap docs: Progress Attribute: aria-valuenow
Min	text	Minimum value for progress. Defines the minimum value for calculating progress. Often used together with aria-valuemin . Bootstrap docs: Labels Attribute: aria-valuemin
Max	text	Maximum value for progress. Defines the maximum value for calculating progress. Often used together with aria-valuemax . Bootstrap docs: Labels Attribute: aria-valuemax

Property	Type	Details
Advanced	css_toggle	Advanced layout options. Advanced layout options provided by the rule. These typically map to Bootstrap utility classes (spacing, flex, display) to fine-tune layout. Bootstrap docs: Utilities API
Color	color_group	Options: text-primary, text-primary-emphasis, text-secondary, text-secondary-emphasis, text-success, text-success-emphasis
Text Opacity	range
Align	button_group	Controls text alignment. Controls text alignment using Bootstrap text utilities. Applies classes like text-start , text-center , text-end , including responsive variants (e.g. text-md-center ). Bootstrap docs: Text utilities Options: text-start, text-center, text-end
Font Weight	button_group	Controls font weight. Controls font weight using Bootstrap font-weight utilities. Applies fw-light , fw-normal , fw-bold , etc. Bootstrap docs: Font weight Options: B, B+, N, L, L+
Line Height	button_group	Controls line height. Controls line height using Bootstrap line-height utilities. Applies lh-1 , lh-sm , lh-base , or lh-lg . Bootstrap docs: Line height Options: 1, SM, BS, LG

Property	Type	Details
Back Color	color_group	Options: text-bg-primary, bg-primary, bg-primary-subtle, text-bg-secondary, bg-secondary, bg-secondary-subtle
Back Opacity	range	Controls background opacity. Controls background opacity when using background color utilities. Applies classes like bg-opacity-25 , bg-opacity-50 , etc. Bootstrap docs: Background utilities
Width	range	Sets a Bootstrap width utility class. Sets a Bootstrap width utility class. Applies utilities like w-25 , w-50 , w-75 , w-100 , or w-auto . Bootstrap docs: Sizing
Height	range	Sets a Bootstrap height utility class. Sets a Bootstrap height utility class. Applies utilities like h-25 , h-50 , h-75 , h-100 , or h-auto . Bootstrap docs: Sizing
Opacity	range	Sets the opacity utility class. Sets an opacity utility class. Applies utilities such as opacity-25 , opacity-50 , opacity-75 , or opacity-100 . Bootstrap docs: Opacity
Shadow	droplist	Applies a Bootstrap shadow utility. Applies a Bootstrap shadow utility. Uses classes like shadow , shadow-sm , shadow-lg , or removes shadow with shadow-none . Bootstrap docs: Shadows Options: Default, None, Small, Regular, Large

Property	Type	Details
Margin<br>&<br>Padding	spacing
X Gutter	range	Horizontal gutter size. Sets the horizontal gutter (spacing between columns). Uses gx-* utilities to control the horizontal gutter size. Bootstrap docs: Gutters
Y Gutter	range	Vertical gutter size. Sets the vertical gutter (spacing between rows). Uses gy-* utilities to control the vertical gutter size. Bootstrap docs: Gutters