ProgressBar

    ProgressBar is a process status indicator.

    
    import { ProgressBar } from 'primeng/progressbar';
    // For dynamic progressbar demo
    import { ToastModule } from 'primeng/toast';
    
    

    ProgressBar is used with the value property.

    50%
    
    <p-progressbar [value]="50" />
    
    

    Value is reactive so updating it dynamically changes the bar as well.

    
    <p-progressbar [value]="value" />
    
    

    content template allows displaying custom content inside the progressbar.

    50/100
    
    <p-progressbar [value]="50">
        <ng-template pTemplate="content" let-value>
            <span>{{value}}/100</span>
        </ng-template>
    </p-progressbar>
    
    

    For progresses with no value to track, set the mode property to indeterminate.

    
    <p-progressbar mode="indeterminate" [style]="{ height: '6px' }" />
    
    

    Screen Reader

    ProgressBar components uses progressbar role along with aria-valuemin, aria-valuemax and aria-valuenow attributes. Value to describe the component can be defined usingaria-labelledby and aria-label props.

    
    <span id="label_status">Status</span>
    <p-progressbar aria-labelledby="label_status" />
    
    <p-progressbar aria-label="Status" />
    
    

    Keyboard Support

    Not applicable.