How to Create Animated Loading Spinners in GIMP

This guide explains how to design and export custom animated loading spinners using GIMP. You will learn how to set up a transparent square canvas, design a base spinner element, generate smooth sequential motion across multiple layers, preview the frame timing, and export the final project as an optimized animated GIF suitable for web or app interfaces.

1. Set Up Your Canvas

  1. Open GIMP and go to File > New.
  2. Set the Width and Height to identical dimensions (e.g., 128 x 128 px or 256 x 256 px).
  3. Expand Advanced Options and set Fill with to Transparency.
  4. Click OK.
  5. Add center guides to ensure symmetry by going to Image > Guides > New Guide (by Percent). Create one horizontal guide at 50% and one vertical guide at 50%.

2. Design the Base Spinner Graphic

  1. Select the Ellipse Select Tool (E).
  2. In the Tool Options, check Expand from center and Fixed: Aspect ratio (1:1).
  3. Click and drag outward from the center guide intersection to create a circle.
  4. Go to Edit > Stroke Selection. Choose Stroke with a paint tool or Stroke line, set the line width (e.g., 8 px), and click Stroke.
  5. To create an open arc or a fading tail:
    • Use the Eraser Tool (Shift + E) to remove a portion of the circle.
    • Alternatively, use the Gradient Tool (G) on a layer mask to create a fading opacity gradient along the path.

3. Generate the Animation Frames

GIMP interprets individual layers as animation frames from bottom to top. To create smooth rotational movement:

  1. Decide on your frame count and rotation step. A standard 12-frame animation requires rotating each consecutive frame by 30 degrees (360° / 12 = 30°).
  2. Right-click your base layer in the Layers panel and select Duplicate Layer (Ctrl + Shift + D or Cmd + Shift + D).
  3. Select the Rotate Tool (Shift + R), click the duplicated layer on the canvas, set the angle to 30°, and click Rotate.
  4. Duplicate this newly rotated layer.
  5. Open the Rotate Tool again, set the angle to 30°, and confirm.
  6. Repeat this process until you have 12 total layers covering a full 360-degree rotation.

4. Preview the Animation

  1. Go to Filters > Animation > Playback... to open the preview window.
  2. Click Play to test the rotation speed and smoothness.
  3. Adjust the playback speed dropdown if necessary to determine the desired frame rate.

5. Export as an Animated GIF

  1. Go to File > Export As....
  2. Name your file with a .gif extension (e.g., spinner.gif) and click Export.
  3. In the export dialog:
    • Check the As animation box.
    • Check Loop forever.
    • Set Delay between frames where unspecified (typically between 40 ms and 80 ms for smooth playback).
    • Set Frame disposal where unspecified to One frame per layer (replace) to prevent frames from drawing on top of each other.
  4. Click Export to finalize your custom loading spinner.