Progress Bar and Indicator Animation Implementation in Mobile Apps
A progress bar is communication. Linear filling to 70% then stalling? User already thinks the app froze. Loading indicator spinning identically at 0% and 99%? No sense of progress. Animation here isn't decoration—it's function.
Types and Implementation
Linear progress bar—simplest. On iOS: CALayer with bounds.size.width animation via CABasicAnimation. On Android: ObjectAnimator.ofInt(progressBar, "progress", from, to) with setInterpolator(DecelerateInterpolator())—deceleration near end gives "almost ready" feeling. In Flutter: TweenAnimationBuilder with LinearProgressIndicator(value: progress).
Critical nuance: never update progress bar more than once per 100–200ms on network load. Jerky update every 10ms looks worse than smooth update every 200ms with animation between values.
Circular indicator—CAShapeLayer with strokeEnd on iOS or Canvas + drawArc on Android. For custom design with gradient around circle: CAGradientLayer + CAShapeLayer as mask—standard but not obvious.
Skeleton screens instead of spinners—right choice for content screens. Implement via shimmer effect: CAGradientLayer with locations animation from [-1, -0.5, 0] to [1, 1.5, 2]. On Android—Shimmer library from Facebook or ValueAnimator + custom Drawable.
Indicator with Easing
Progress shouldn't move linearly—feels mechanical. CAMediaTimingFunction(controlPoints: 0.25, 0.46, 0.45, 0.94) (ease-out) creates accelerating then smoothly finishing feel. For multi-stage progress (download → process → save), animate each stage separately with micro-pause between.
Timeline: 1 day for standard progress bar with custom design and animation.