How to make sikuli detect a loading bar or Ajax loading circle and to wait till it finish loading to do some action

without a screenshot before process starts, while it is running and after it has finished, it is hard to suppose a concrete workflow.

But in general one can solve such situations this way:
waitVanish(img1, time1) #1
wait(img2, time2) #2

#1 waits until the process starts by waiting for an image to disappear, that does no longer exist after the process started
#2 waits for an image to appear, that gets available when the process has finished.

time1 is only needed if the average waiting time of 3 seconds is not sufficient
time2 must be a time larger than the longest possible project duration

To make this robust, the waits should be restricted to appropriate regions.

what do you mean by img2 , what does this represent

in addition, my images are GIF, Sikuli not able to detect their appearance

the mentioned approach does not care about the animated visual at all, but only about the content of the region containing the loading bar/circle before it starts getting animated (img1) and the content after it has stopped animation again (img2)