This type of simple, low-profile progress bar is commonly used in places where you want to show quick, lightweight progress without taking up much screen space.

Benefits of this progress bar:

It’s especially useful in:

Onboarding flows: Guiding users through steps like choosing goals, setting preferences, or creating an account.

Setup wizards: For apps that require initial configuration (fitness apps, finance apps, learning apps, etc.).

Form completion: Multi-step forms such as surveys, applications, or checkouts.

Feature walkthroughs: When introducing new app features and helping users complete a short tutorial.

Profile completion indicators: Showing how much of a profile or setup is done (common in social, productivity, or job-search products).

Overall, this style works best in short, guided, multi-step experiences where you want users to feel momentum and stay oriented.

General Overview

Linear Progress Bar Structure:

The Linear Progress Bar is just one parent component with no sub section to it.

Linear progress Bar configuration:

Progress Steps

Total Steps: Total Steps is exactly equivalent to the number of slides your entire Flow consists of.

For an instance, if this is a onboarding flow and it has 7 screens, the Total Step =7

Current Steps: Current step number is the actual position of the screen you are customizing.

For an instance ,if the current screen is the first screen of your Onboarding flow, the Current step =1

Size

Styles

Padding

Margin