: Loading Spinner Gif I would like to create a loading spinner that looks like the one GitHub uses: Any tips on how to replicate this with another logo inside using Gimp? I am especially interested

@Lee3735518

I am doing this in Photoshop but the process would be the same in GIMP.

Create a circle

Create the divider line. This will be used to subtract from the circle.



I then duplicated the layer and rotated the object. In total this is 4 objects (1 vertical, 1 horizontal and 2 angled lines). I rotated using Photoshop's smart snap but you can just rotate the line by 45 degrees. 360 / 8 = 45



Then select all of the layers and rotate them together. Because the angles are 45 degrees I will want to rotate the lines half of that which is 22.5. This is only to replicate how the bottom has a line just like github.



How to create the individual parts

Make sure all of the individual lines are flattened to one layer. Make a selection of that layer. Delete from the circle layer.

You can then use the pen tool to select one part of the circle and then copy -> paste into its own layer. Do this for the rest of the parts.

Animation

The animation is pretty basic. Just have a mid-tone gray. Have a 80% gray for the main line and then do a 70% gray for the line before it and then 60% before it. You can then just rotate the circle for each keyframe or just change the color values.

Vote Up Vote Down