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.
Instagram | Uplabs | Behance | Twitter | Medium
L or F like
Z toggle zoom
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
© 2018 Dribbble. All rights reserved.
A community of designers sharing their work, process, and current projects.
Minimum 6 characters
Uh oh… We’re still waiting for our spam prevention code to load.
Already a member? Sign in