Create a rotating preloader graphic with 12-frame loop, transparent background, and optimized file size for web applications.

Step 1: Spinner Canvas

Create 64×64px document with transparent background.

Step 2: Draw Base Circle

Ellipse Tool: 48×48px circle, no fill, 4px stroke in brand color (#3b82f6).

Step 3: Create Frame 1

Erase 75% of circle stroke leaving a 90° arc at top. This is frame 1.

Step 4: Rotate for Frames

Duplicate frame, rotate 30° (Edit > Transform > Rotate). Repeat for 12 total frames.

Step 5: Open Timeline

Window > Timeline. Create Frame Animation. Set each rotation as a frame, 0.1 sec delay.

Step 6: Loop Settings

Set looping to Forever. Preview animation in browser via File > Export > Save for Web.

Step 7: Optimize GIF

Export GIF with 64 colors max, dither 88%, lossy 10 for smallest file size under 15KB.

That's it! You've completed this tutorial. Experiment with the techniques and share your results with the Designstacks community.