Default

This is the default progress bar which animates in and automatically hides when complete.

Small

This is very similar to the default progress bar but is a little thinner to fit nicely inline, e.g. at the top of a page.

Stepped

This option allows you to specify how many steps there are in a given task. These are great to guide users through longer processes such as completing a form.

                                                
                                                import { Component } from 'react';
                                                import BpkProgress from '@skyscanner/backpack-web/bpk-component-progress';
                                                
                                                const Progress = () => (
                                                  <BpkProgress
                                                    min={0}
                                                    max={100}
                                                    value={63}
                                                    aria-label="Searching"
                                                    onCompleteTransitionEnd={() => alert('Completed!')}
                                                  />
                                                );
                                                
                                                const Steps = () => (
                                                  <BpkProgress
                                                    stepped
                                                    min={0}
                                                    max={5}
                                                    value={1}
                                                    aria-label="Checkout"
                                                    getValueText={(value, min, max) => `Step ${value} of ${max}`}
                                                  />
                                                );

Props