Match Focus Android 'Loading bar' UI

[antlam]

Firefox Focus on Android is actually using a Photon-gradient loading bar that we plan on using across Mobile. I think this is strictly a UI matter but it would be more consistent if we could unify the two Focus apps here.

Focus on iOS is currently using an old loading bar UI.

[Sdaswani]

@bkmunar my estimate is 1.5 days - agree?

[bkmunar]

Is there a mock for this? unsure on what to be building

[lime124]

I'm going to need either @antlam or @brampitoyo to provide what you need. I'm not sure what the colors are. I believe this is what antlam is after:

mozilla-mobile/focus-android#1132

[brampitoyo]

Here’s a visual design spec that tries to unify the iOS and Android progress bar as per @antlam’s original comment.

[antlam]

Thanks @brampitoyo ! note: this is iOS so it will likely be px instead of dp. But the numbers are still correct!

[bkmunar]

Better to overestimate: M

[antlam]

@bkmunar I really suggest playing with it on an Android device as well since this includes a lot of motion specific design elements.

@pocmo made the one on Android. Maybe he has pro-tips 😄

[pocmo]

@walkingice implemented it for Fennec and we just stole the code for Focus. 😂

[pocmo]

There's a GIF here:
https://github.com/walkingice/Progressbar/blob/master/misc/imgs/screenshot.gif

Note that there's an additional animation when loading has completed.

[bkmunar]

I saw his code for it! Now I just have to translate it into iOS :P Hopefully @walkingice can help me through that process

[bbinto]

@bkmunar to give @antlam a build for review

[antlam]

Reviewed initial build, left feedback comments for @bkmunar via Slack.

• pulsing animation
• finishing animation
• left aligned bar (doesn't show rounded left-end until finishing animation)