Marlo Blog

How to make a loading spinner gif from scratch

August 14, 2019

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

Loading spinner gif

What you’re going for

A gif is just a bunch of sequenced images strung together. You don’t need too many images, 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 36 images, or one image for every 10 degrees of rotation, however you could easily get away with half that many and still have a good looking animation.

Tools you’ll need

For this project you’ll need vector editing software and imagemagick. I use Affinity designer which has all the awesome features of Adobe Illustrator without the exorbitant monthly bill. If that’s still out of budget you can use the free and open source Gimp editor, or one of the great browser based tools available.

After you create your images, you’ll need Imagemagick, a free and super useful command line tool for image manipulation. I could do an entire post on how awesome and ubiquitous Imagemagick is but for now just go ahead and install it globally using Brew or the package manager of your choice.

Create the images

Once you’ve got your tooling taken care of go ahead and open up your vector editing software and create an artboard. You can always size the gif down with imagemagick in the build step so it’s better to err on the side of too large. Since we don’t need the spinner to be very large, you can go with something like 100x100 pixels. That will ensure a good resolution for your final result. Here are the detailed steps for creating the images. If you’re comfortable doing that on your own you can skip to the next section.

  • Create a 100x100 pixel circle. spinner gif screenshot
  • Copy and paste the circle and resize it down to 90x90.
  • Center the smaller circle over the larger one and use the subtract feature to create a ring. spinner gif screenshot
  • Now copy and paste the ring. You can set it to the color you’d like now or later.
  • Create a couple of rectangles that exceed the width of the rings. spinner gif screenshot
  • Place one of the rectangles over one of the rings and subtract. spinner gif screenshot
  • Place the other rectangle vertically over the remaining ring segment and tilt it 10 or 20 degrees, making sure to move it over a bit before subtracting again. spinner gif screenshot
  • Create two smaller 10x10 pixel circles the color of your ring segment and place them over the ends. Use the add feature to give the segment rounded edges. spinner gif screenshot
  • If you want a specific background color, create an artboard sized square and set it as the lowest layer. If you want a transparent background you can do that as well—just make sure to export your images as PNG’s.
  • Now create a layer group with the ring and the ring segment. spinner gif screenshot

At this point your artboard should look like one frame of your final spinner.

  • Export the image to a folder somewhere in your workspace and name it yourprojectname01.png. spinner gif screenshot
  • Go back to your editing software and highlight your ring group, grabbing the handle at the top and moving it 10 degrees clockwise. spinner gif screenshot
  • Export that image to the same folder with the name yourprojectname02.png
  • Do that 34 more times until you’ve got a frame for every 10 degree turn. It’s a little tedious but it’s worth it!

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

Create the gif

This is the fun part! Open a terminal session and cd into the folder that contains the images. If your imagemagick installation was successful you’re just one command away from having your loading spinner gif!

Enter the following command in the shell:

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

Here’s what that means:

Convert is the imagemagick function you’re calling. -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. 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. The star before *.png is a wildcard command which tells imagemagick to grab every file in the folder that ends with .png. If we wanted to use only certain images we could name them explicitly. The final value is the name of your new gif.

If you want your gif to be a different size 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

You should only use the -resize flag to make your image smaller or else it will look overly pixelated.

Conclusion

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

Now that you know how easy it is 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 in many cases, if you’re strategic with what elements you move around, it takes very few frames to create a sense of motion.

Have fun and feel free to share whatever you come up with!


the Marlo team

Written by the Marlo team. Follow us on Twitter!