Accordion Button Card Carousel Dialog Dropdown Layout List group Navbar Navigation Navs and tabs Others Toast Typography

Progress (progress)

The progress element displays an indicator showing the completion progress of a task, typically in the form of a bar. Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. Bootstrap does not use the HTML5 <progress> element, ensuring you can stack progress bars, animate them, and place text labels over them.

🔗 External documentation.

ID Label Description Schema
label Label Text shown inside the progress bar.
aria_label Aria label Name of the progress bar for assistive technology. 
                        type: string
percent Total progress (%) Width of the progress element representing total progress (25%, 50%, etc.). 
                        type: number
min Minimum value Minimum value of the progress element (default is 0). Used for an aria attribute. 
                        type: number
max Maximum value Maximum value of the progress element (default is 100). Used for an aria attribute. 
                        type: number
bar_height Height Height of progress element in pixels (px). Leave empty for default height. 
                        type: number

                      
            id: progress
label: Progress
description: 'The progress element displays an indicator showing the completion progress of a task, typically in the form of a bar. Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. Bootstrap does not use the HTML5 <progress> element, ensuring you can stack progress bars, animate them, and place text labels over them.'
homepage: 'https://getbootstrap.com/docs/5.3/components/progress/'
variants:
    default:
        id: default
        label: Default
    striped:
        id: striped
        label: Striped
    striped__animated:
        id: striped__animated
        label: 'Animated stripes'
slots:
    label:
        id: label
        label: Label
        description: 'Text shown inside the progress bar.'
props:
    aria_label:
        id: aria_label
        label: 'Aria label'
        description: 'Name of the progress bar for assistive technology.'
        schema:
            type: string
    percent:
        id: percent
        label: 'Total progress (%)'
        description: 'Width of the progress element representing total progress (25%, 50%, etc.).'
        schema:
            type: number
    min:
        id: min
        label: 'Minimum value'
        description: 'Minimum value of the progress element (default is 0). Used for an aria attribute.'
        schema:
            type: number
    max:
        id: max
        label: 'Maximum value'
        description: 'Maximum value of the progress element (default is 100). Used for an aria attribute.'
        schema:
            type: number
    bar_height:
        id: bar_height
        label: Height
        description: 'Height of progress element in pixels (px). Leave empty for default height.'
        schema:
            type: number
examples:
    preview:
        id: preview
        label: Preview
        renderable:
            '@component': progress
            label: Label
            percent: 50
            max: 100

Default ( default )

Label
<div class="progress"> <div aria-label="Progress bar" aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" class="progress-bar" role="progressbar" style="width: 50%"> Label </div> </div>

Striped ( striped )

Label
<div class="progress"> <div aria-label="Progress bar" aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" class="progress-bar-striped progress-bar" role="progressbar" style="width: 50%"> Label </div> </div>

Animated stripes ( striped__animated )

Label
<div class="progress"> <div aria-label="Progress bar" aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" class="progress-bar-striped progress-bar-animated progress-bar" role="progressbar" style="width: 50%"> Label </div> </div>