Uptop. Loader Animation Process

Newest loader

1 Attachment

Hey there,

Designing a loader was quite an interesting experience and so I decided to share it with the most creative online community I know.

The first version was designed in Principle and so the challenge was to define the rotation points for each of the triangles. To make it more clear and tangible I used a few sticker notes to create some sort of prototype before getting into pixels. The prototype took me about one minute, can't imagine how much time would be spent by playing with the keyframes as the first step.

The loader has two stages. The initial one lasts for ≈5sec after which the animation switches to more "shaky" version. The idea is to indicate to a user that the system still processes the request and so gives them a visual feedback.

The whole animation was successfully implemented with the help of Lottie, thanks to Airbnb.

Principle sources are attached for those who practice this amazing tool.

Stay updated!

Instagram | Uplabs | Behance | Twitter | Medium

keyboard shortcuts: L or F like Z toggle zoom