Back
Progress Bar

In addition to Preloader, Framework7 also comes with fancy animated determinate and infinite/indeterminate progress bars to indicate some activity.

Determinate Progress Bar

When progress bar is determinate it indicates how long an operation will take when the percentage complete is detectable.

Inline determinate progress bar:

10%30%50%100%

Inline determinate load & hide:

Start Loading

Overlay with determinate progress bar on top of the app:

Start Loading

Infinite Progress Bar

When progress bar is infinite/indeterminate it requests that the user wait while something finishes when it’s not necessary to indicate how long it will take.

Inline infinite progress bar

Multi-color infinite progress bar

Overlay with infinite progress bar on top of the app

Start Loading

Overlay with infinite multi-color progress bar on top of the app

Start Loading

Colored