Skip to content
Larasby Kotek

Component

Loading bar

The splash's progress: a thin red line filling a card-colored track. No percentage on screen.

LoadingBar in Kotek/Features/Onboarding/Splash/LoadingBar.swift

Preview

Loading · LoadingBar on a Card track.
Dark · ButtonSecondary on a Card track. In the design; where it's used is still to be decided.

Specs

Height
5pt, capsule
Track
Card
Fill
LoadingBar
Width
25% of the screen, at most 240pt
Accessibility
Announced as "Loading", with the percentage as its value

Usage

Do

  • Ease the fill so progress never jumps.

Don't

  • Print the percentage on screen; VoiceOver reads it instead.