Progress bar

Progress bars are a great way of providing feedback when a task is running. Unlike spinners, they give the user a clear idea of how long the given task will take.

Default

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

Storybook failed to load.

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.

Storybook failed to load.

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.

Storybook failed to load.

bpk-component-progress

Backpack progress bar component.

Installation

Check the main Readme for a complete installation guide.

Usage


                                                
                                                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

Check out the full list of props on Skyscanner's design system documentation website.

Props

Storybook failed to load.