How to make a loading spinner GIF from scratch

Despite the plethora of spinner gifs available on the net, there are still plenty of occasions when you need to make one from scratch. There are lots of ways to get that done, so I'll just show you one that's relatively quick and painless and has worked for me.

What you're going for

A gif is just a bunch of images strung together. You don't need too many, however the more you use the more fluid your spinner animation will appear. Since spinners are usually quite small you don't have to worry much about them being too heavy. For this example I used one image for every 10 degrees of rotation or 36 images total, however you can easily get away with half that.

Tools you'll need

For this project you'll need some sort of vector editing software and you'll need to have imagemagick installed on your machine. I use Affinity designer which has all the awesome features of Adobe Illustrator without the exorbitant monthly bill. There are also some great browser based tools that will get the job done.

Imagemagick is a super useful command line tool for image manipulation. I could do an entire post on how awesome it is but for now just go ahead and brew install it globally if you haven't already.

Create the images

Open up your vector editing software and create an artboard of 100x100 pixels. You can always resize the gif down in the imagemagick build step so it's better to err on the side of too large. That will also ensure you get a good resolution in your final result. Here are the detailed steps to creating your image. If you're comfortable doing that on your own just skip to the next section.

  • Create a circle of 100x100 pixels.
  • Copy that circle and resize it down to 90x90.
  • Center the smaller circle over the larger one and use the subtract feature to get your ring.
  • Copy the ring and set it to the color you'd like to use.
  • Create a couple of large rectangles that can cover the width of the rings.
  • Place one of the rectangles halfway up the copied ring and subtract.
  • Place the other rectangle vertically over the remaining part of the second ring and tilt it to 10 or 20 degrees making sure to move it over a bit before using subtract again.
  • Create two smaller 10x10 pixel circles the color of your ring segment and place them at the ends and use the add feature to give the segment rounded edges.
  • If you want a background create a 100x100 square the size of your artboard or you can export the images as png's with a transparent background as well.
  • Group the ring and the ring segment with command G.

At this point your artboard should reflect one frame of what you'd like your final spinner to look like.

  • Export the image to a folder somewhere in your workspace and name it your_project_name01.png.
  • Go back to your editing software and highlight your ring group then grab the handle at the top and move it 10 degrees clockwise.
  • Export that image to the same folder with the name your_project_name02.png
  • Do that 34 more times until you've got a frame for every 10 degree turn.

At this point you should have a folder with 36 images numbered 01 through 36.

Create the gif

Now comes the fun part!
Open a terminal session and cd into the folder with the images.
If you've successfully installed imagemagick you should be one command away from having your loading spinner gif!

Enter the following command:

your_project_folder$ convert -loop 0 -delay 4 *.png your_new_spinner.gif

The command breaks down like so:

Convert calls the imagemagick function. -loop sets the amount of times you'd like the gif to repeat. Since we want the gif to spin indefinitely we put 0 which means infinite. -delay sets the amount of time between frames in milliseconds. Since we have so many frames we want to set it pretty fast. If we had fewer frames we could get away with a higher number. *.png is a wildcard command which just tells imagemagick to grab every file in the folder that ends with .png. If we wanted to only use certain images we could name them explicitly. The final command is whatever you'd like the name of your new gif to be.

If you want to resize your gif just add the -resize flag followed by the dimensions you'd like.

your_project_folder$ convert -loop 0 -delay 4 -resize 50x50 *.png your_new_spinner.gif

To sum it up

That's it you've done it! If you go back to the folder in your finder you should see your new spinner gif! Feel free to experiment with the look and feel of your spinner, the amount of frames you want to use, and the flags and settings in the command to get it just how you'd like it.

Now that you know how easy it is to make a spinner you'll probably want to branch out and start making all sorts of custom gifs! It can become tedious making dozens of frames for larger projects so a neat trick I've learned is that it takes very few frames to create a sense of motion in many cases--if you're strategic with what you move around.

Have fun and feel free to share what you've come up with in the comments!