Skip to content
Primer/Interface guidelines
Design
Interface guidelinesOcticonsPresentationsCommand lineMobileDesktop
Build
CSSReactReact BrandViewComponents
ContributeAbout
On this page

Progress Bar

On this page
Stable
66 variants
Edited by Ash Guillaume on 16 Nov 2022
Figma

Playground

si,,,z,,,e: medium (default), is,,,E,,,m,,,p,,,t,,,y,,,?: false, # ,,,o,,,f,,, ,,,I,,,t,,,e,,,m,,,s: 1
si,,,z,,,e: small, is,,,E,,,m,,,p,,,t,,,y,,,?: false, # ,,,o,,,f,,, ,,,I,,,t,,,e,,,m,,,s: 1
si,,,z,,,e: large, is,,,E,,,m,,,p,,,t,,,y,,,?: false, # ,,,o,,,f,,, ,,,I,,,t,,,e,,,m,,,s: 1
si,,,z,,,e: medium (default), is,,,E,,,m,,,p,,,t,,,y,,,?: true, # ,,,o,,,f,,, ,,,I,,,t,,,e,,,m,,,s: none
si,,,z,,,e: small, is,,,E,,,m,,,p,,,t,,,y,,,?: true, # ,,,o,,,f,,, ,,,I,,,t,,,e,,,m,,,s: none
si,,,z,,,e: large, is,,,E,,,m,,,p,,,t,,,y,,,?: true, # ,,,o,,,f,,, ,,,I,,,t,,,e,,,m,,,s: none
si,,,z,,,e: medium (default), is,,,E,,,m,,,p,,,t,,,y,,,?: false, # ,,,o,,,f,,, ,,,I,,,t,,,e,,,m,,,s: 2
si,,,z,,,e: small, is,,,E,,,m,,,p,,,t,,,y,,,?: false, # ,,,o,,,f,,, ,,,I,,,t,,,e,,,m,,,s: 2
si,,,z,,,e: large, is,,,E,,,m,,,p,,,t,,,y,,,?: false, # ,,,o,,,f,,, ,,,I,,,t,,,e,,,m,,,s: 2
si,,,z,,,e: medium (default), is,,,E,,,m,,,p,,,t,,,y,,,?: false, # ,,,o,,,f,,, ,,,I,,,t,,,e,,,m,,,s: 3
si,,,z,,,e: small, is,,,E,,,m,,,p,,,t,,,y,,,?: false, # ,,,o,,,f,,, ,,,I,,,t,,,e,,,m,,,s: 3
si,,,z,,,e: large, is,,,E,,,m,,,p,,,t,,,y,,,?: false, # ,,,o,,,f,,, ,,,I,,,t,,,e,,,m,,,s: 3
si,,,z,,,e: medium (default), is,,,E,,,m,,,p,,,t,,,y,,,?: false, # ,,,o,,,f,,, ,,,I,,,t,,,e,,,m,,,s: 4
si,,,z,,,e: small, is,,,E,,,m,,,p,,,t,,,y,,,?: false, # ,,,o,,,f,,, ,,,I,,,t,,,e,,,m,,,s: 4
si,,,z,,,e: large, is,,,E,,,m,,,p,,,t,,,y,,,?: false, # ,,,o,,,f,,, ,,,I,,,t,,,e,,,m,,,s: 4
si,,,z,,,e: medium (default), is,,,E,,,m,,,p,,,t,,,y,,,?: false, # ,,,o,,,f,,, ,,,I,,,t,,,e,,,m,,,s: 5
si,,,z,,,e: small, is,,,E,,,m,,,p,,,t,,,y,,,?: false, # ,,,o,,,f,,, ,,,I,,,t,,,e,,,m,,,s: 5
si,,,z,,,e: large, is,,,E,,,m,,,p,,,t,,,y,,,?: false, # ,,,o,,,f,,, ,,,I,,,t,,,e,,,m,,,s: 5
si,,,z,,,e: medium (default), is,,,E,,,m,,,p,,,t,,,y,,,?: false, # ,,,o,,,f,,, ,,,I,,,t,,,e,,,m,,,s: 6
si,,,z,,,e: small, is,,,E,,,m,,,p,,,t,,,y,,,?: false, # ,,,o,,,f,,, ,,,I,,,t,,,e,,,m,,,s: 6
si,,,z,,,e: large, is,,,E,,,m,,,p,,,t,,,y,,,?: false, # ,,,o,,,f,,, ,,,I,,,t,,,e,,,m,,,s: 6
si,,,z,,,e: medium (default), is,,,E,,,m,,,p,,,t,,,y,,,?: false, # ,,,o,,,f,,, ,,,I,,,t,,,e,,,m,,,s: 7
si,,,z,,,e: small, is,,,E,,,m,,,p,,,t,,,y,,,?: false, # ,,,o,,,f,,, ,,,I,,,t,,,e,,,m,,,s: 7
si,,,z,,,e: large, is,,,E,,,m,,,p,,,t,,,y,,,?: false, # ,,,o,,,f,,, ,,,I,,,t,,,e,,,m,,,s: 7
si,,,z,,,e: medium (default), is,,,E,,,m,,,p,,,t,,,y,,,?: false, # ,,,o,,,f,,, ,,,I,,,t,,,e,,,m,,,s: 8
si,,,z,,,e: small, is,,,E,,,m,,,p,,,t,,,y,,,?: false, # ,,,o,,,f,,, ,,,I,,,t,,,e,,,m,,,s: 8
si,,,z,,,e: large, is,,,E,,,m,,,p,,,t,,,y,,,?: false, # ,,,o,,,f,,, ,,,I,,,t,,,e,,,m,,,s: 8
si,,,z,,,e: medium (default), is,,,E,,,m,,,p,,,t,,,y,,,?: false, # ,,,o,,,f,,, ,,,I,,,t,,,e,,,m,,,s: 9
si,,,z,,,e: small, is,,,E,,,m,,,p,,,t,,,y,,,?: false, # ,,,o,,,f,,, ,,,I,,,t,,,e,,,m,,,s: 9
si,,,z,,,e: large, is,,,E,,,m,,,p,,,t,,,y,,,?: false, # ,,,o,,,f,,, ,,,I,,,t,,,e,,,m,,,s: 9
si,,,z,,,e: medium (default), is,,,E,,,m,,,p,,,t,,,y,,,?: false, # ,,,o,,,f,,, ,,,I,,,t,,,e,,,m,,,s: 10
si,,,z,,,e: small, is,,,E,,,m,,,p,,,t,,,y,,,?: false, # ,,,o,,,f,,, ,,,I,,,t,,,e,,,m,,,s: 10
si,,,z,,,e: large, is,,,E,,,m,,,p,,,t,,,y,,,?: false, # ,,,o,,,f,,, ,,,I,,,t,,,e,,,m,,,s: 10
is,,,E,,,m,,,p,,,t,,,y,,,?
si,,,z,,,e
,,,o,,,f,,,,,,I,,,t,,,e,,,m,,,s

Props

NameTypeValuesDefault
si,,,,,,,z,,,,,,,eVariantlarge medium (default) small medium (default)
is,,,,,,,E,,,,,,,m,,,,,,,p,,,,,,,t,,,,,,,y,,,,,,,?Variantfalse true false
,,,,,,,o,,,,,,,f,,,,,,,,,,,,,,I,,,,,,,t,,,,,,,e,,,,,,,m,,,,,,,sVariant1 10 2 3 4 5 6 7 8 9 none 1

Size

si,,,,,,,,,,,,,,,z,,,,,,,,,,,,,,,e: medium (default), is,,,,,,,,,,,,,,,E,,,,,,,,,,,,,,,m,,,,,,,,,,,,,,,p,,,,,,,,,,,,,,,t,,,,,,,,,,,,,,,y,,,,,,,,,,,,,,,?: false, # ,,,,,,,,,,,,,,,o,,,,,,,,,,,,,,,f,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,I,,,,,,,,,,,,,,,t,,,,,,,,,,,,,,,e,,,,,,,,,,,,,,,m,,,,,,,,,,,,,,,s: 1

isEmpty

si,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,z,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,e: medium (default), is,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,E,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,m,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,p,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,t,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,y,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,?: false, # ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,o,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,f,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,I,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,t,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,e,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,m,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,s: 1

# of Items

si,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,z,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,e: medium (default), is,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,E,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,m,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,p,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,t,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,y,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,?: false, # ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,o,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,f,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,I,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,t,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,e,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,m,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,s: 1
Edit this page on GitHub