Progress stepper

Success, current, and pending steps with descriptions.

1. Step 1

   Completed
2. Step 2

   In progress
3. Step 3

   Pending

pf-m-vertical.

1. Configure

   Pipeline configured.
2. Build

   Compiling sources…
3. Deploy

   Waiting for build.

pf-m-vertical-on-lg + pf-m-horizontal-on-2xl — vertical below lg, horizontal again from 2xl.

1. First step

   Completed
2. Second step

   In progress
3. Third step

   Pending

pf-m-compact.

1. First step

   Completed
2. Second step

   In process
3. Third step

   Pending

pf-m-compact pf-m-vertical.

1. First step
2. Second step
3. Third step

pf-m-compact with pf-m-vertical-on-lg pf-m-horizontal-on-xl.

1. First step
2. Second step
3. Third step

pf-m-compact pf-m-vertical pf-m-center.

1. First step
2. Second step
3. Third step

pf-m-compact pf-m-center.

1. First step
2. Second step
3. Third step

pf-m-center centers titles under the icons.

1. First step

   Completed
2. Second step

   In progress
3. Third step

   Pending

pf-m-center pf-m-vertical with descriptions.

1. First step

   Completed
2. Second step

   In progress
3. Third step

   Pending

A pf-m-warning step flags a non-blocking problem.

1. Built
2. Tests passed with warnings
3. Deploying
4. Released

A pf-m-danger step halts the flow.

1. Built
2. Tests
3. Deploy failed
4. Released

The current step’s icon is an xs spinner (core’s IsInProgressAnimate).

1. Successful completion
2. In process
3. Pending

pf-m-custom steps carry arbitrary icons.

1. Code

   Pushed to main
2. Build

   Image built
3. Ship

   Awaiting approval

The current step\u2019s title opens a popover (pf-m-help-text).

1. First step
2. Second step

   Details about what happens during the second step.
3. Third step