#7 Primer — Displaying Progress Circle inside a Floating Action Button

Swapnil Borkar
One Little Detail
Published in
1 min readApr 5, 2017

Between the criticism of FABs causing terrible UX and not displaying enough information to the user, to the argument against of why they’re important — Primer has a subtle way of letting marketers know where they’re located in a lesson by adding one little detail to the FAB.

The Floating Action Button has a Progress Bar/Circle with a width of 2px

This is interesting since, it’s an app that adheres to the guidelines well, uses kick-ass animations but also is capable of elevating the experience to the next level.

I’ve had troubles to display progress on a card with a FAB. Especially if it was a video artifact. The Progress would conflict with the FAB itself. Instead, a better implementation seems to be Primer’s approach.

It maintains the state wonderfully and transitions to the meter progress in the details activity.

Progress/Meter bar in Detail Activity

What are few other creative implementations of the FAB you’ve seen in apps?

--

--

Swapnil Borkar
One Little Detail

I like to design products which provide better experiences and solve/discuss pressing problems with #Design