I am currently working on a project in which some screens require loading animation. Based on the information displayed after loading, I want to select the loading animation. There are several cases but I want to keep this question broad in the context.

P.S. If people feel that asking a broad question in a given context is not appropriate then they can consider few scenario mention here -

  • Loading animation displaying before Search Results. Yes, we need to show some delay.

  • Loading animation displaying for fetching data

  • Loading animation displaying for syncing data

    There are some more but I don't want to mention all here. Also, is it good to show different animation for different type of activity?

  • 1
    One pet hate is when a progress bar appears and slowly climbs to 100% but then resets to 0% and starts again! So make sure you use a spinner rather than progress bar if you don't have an accurate way of knowing when the loading is going to complete. Just a note. :) Feb 18, 2016 at 11:51
  • @MichaelBellamy :) I already knew that and thanks for reminding me again. :thumbsup:
    – B L Λ C K
    Feb 18, 2016 at 12:12

2 Answers 2


Seems like your style is already chosen, it's whether to have a determinate or indeterminate animation? If there's a duration you know about and is important to the user, a determinate progress bar might be the best experience. Meanwhile, if duration isn't important to display or unknown, a circular or some kind of looping indeterminate animation may be the best user experience as it appears to have no end.



First: Do all you can to reduce the loading time. This will help your user experience more than different loader animations.

But if this is out of your control, having smooth/nice/fun/informing loaders will probably make the user a bit happier while they wait. The main purpose is to let the user know that the system is not stuck, and if you can - provide information of how long it´s going to take (but only if it´s accurate).

I think that putting work into creating a bunch of different animations should be quite far down on the list of priorities, and I´m not going to give any concrete tips for your cases. But there are a lot of cool examples to get inspired from, for example here:



or just google 'preloader animations' :)

  • Hey thanks for the reply. As, I have mentioned in my question that we need to show some delay before populating the information. It is not because we cant do anything it is because we need to show some other option meanwhile the results are loading. The second part is, I need to know what kind of loading need to show where, I have already have some awesome animation [thanks for the dribble link :) ] but I dont know where to use what. I can't just use random animation wherever I want.
    – B L Λ C K
    Feb 18, 2016 at 9:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.