Skip to content

StepProgress component #302

Open
Open

Description

@aVileBroker

As a developer I want to be able to show the users progress through a wizard, form flow, or other multistep process.

I'm leaving this one intentionally vague for the person who implements it to give some creative freedom on what we can do.

Things to consider:

  • We probably want click events on each step with a reference passed as an argument for which step is clicked
  • Indicators for complete, current, and not completed.
  • Many forms let us go back to previous steps - we should be able to differentiate the current step even if it's completed.
  • Animations?
  • Dots, lines, etc?

Animated example from Dribbble: https://dribbble.com/shots/5937491-Page-Control-Indicator-Transitions-Collection

Animated example from Dribbble: https://dribbble.com/shots/10034848-Tabbar-Indicator
image

Example from Dribbble: https://dribbble.com/shots/15007566-Progress-Indicator-Dark
image

Example from Dribbble: https://dribbble.com/shots/2146282-Sign-Up-Progress-Indicators
image

Do your own research - I always suggest Dribbble to find fun animated inspiration. Remember we want to be enable developers to do whatever they want with our components - no Dribbble shot should be impossible to recreate. (within reason)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Type

No type

Projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions