Loader icon with SVG animation in Photoshop

SVG stands for Scalable Vector Graphics. Creating SVG animation in Photoshop is very convenient.

Other than Adobe Photoshop, you can use Adobe Illustrator as well to create the graphics. Then just export the image in SVG format.

To create a circular loader icon using photoshop, follow the below steps.

Step1. Go to File > New > Select Custom Size (150pixel X 150pixel)

Step2. Go to View > New Guide. Then select 50% for Horizontal. Click OK.

Step3. Repeat the same with 50% for the Vertical Guide. Click OK. This will create the vertical and horizontal guides to create a perfect circle.

At this point, your image looks like below.

Step4. Select the Ellipse Tool. Select the Fill as “No Fill”. Select the Stroke Color and width accordingly. All those options are highlighted below.

Step5. Click at the center of the Guides, hold SHIFT, then start drawing slowly. While drawing, press the ALT (along with SHIFT). This will create the Circle exactly at the Middle of the Canvas.

Step6. Now, export the image as SVG.

Note : DO NOT RASTERIZE THE LAYER. Otherwise you won’t get the proper result after exporting.

Step6. Below is the SVG you get after export.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="150" height="150" viewBox="0 0 150 150">
  <defs>
    <style>
      .cls-1 {
        fill: none;
        stroke: #000;
        stroke-width: 10.84px;
      }
    </style>
  </defs>
  <image id="Layer_0" data-name="Layer 0" width="150" height="150" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAACWCAYAAAA8AXHiAAABlUlEQVR4nO3SQREAIAzAsIF/z8ME/SUSej27uwOfXUEpGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4Sx+G9mHiJBBSjbGOZgAAAAAElFTkSuQmCC"/>
  <circle class="cls-1" cx="75" cy="75" r="58"/>
</svg>

Step7. Now, let’s see how to create animation with the generated SVG, to get a feel of the real power of SVGs.

Use the below styles, and look at the animation created.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="150" height="150" viewBox="0 0 150 150">
  <defs>
    <style>
      .cls-1 {
        fill: none;
        stroke: #000;
        stroke-width: 10.84px;
	animation: circleAnimation 3s infinite linear;
        transform-origin: 50% 50%;
      }
      @keyframes circleAnimation {
          from {
              stroke-dasharray: 400px;
              stroke-dashoffset: 100px;
              transform: rotate(0deg);
          }
          to {
              stroke-dasharray: 400px;
              stroke-dashoffset: 100px;
              transform: rotate(360deg);
          }
      }
    </style>
  </defs>
  <image id="Layer_0" data-name="Layer 0" width="150" height="150" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAACWCAYAAAA8AXHiAAABlUlEQVR4nO3SQREAIAzAsIF/z8ME/SUSej27uwOfXUEpGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4Sx+G9mHiJBBSjbGOZgAAAAAElFTkSuQmCC"/>
  <circle class="cls-1" cx="75" cy="75" r="61"/>
</svg>

This will create the below animation.

Step8. Include the below additional Styles to center the loader.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="150" height="150" viewBox="0 0 150 150">
  <defs>
    <style>
      svg {
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          margin: auto;
      }
      .cls-1 {
        fill: none;
        stroke: #000;
        stroke-width: 10.84px;
		animation: circleAnimation 3s infinite linear;
        transform-origin: 50% 50%;
      }
      @keyframes circleAnimation {
          from {
              stroke-dasharray: 400px;
              stroke-dashoffset: 100px;
              transform: rotate(0deg);
          }
          to {
              stroke-dasharray: 400px;
              stroke-dashoffset: 100px;
              transform: rotate(360deg);
          }
      }
    </style>
  </defs>
  <image id="Layer_0" data-name="Layer 0" width="150" height="150" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAACWCAYAAAA8AXHiAAABlUlEQVR4nO3SQREAIAzAsIF/z8ME/SUSej27uwOfXUEpGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4SxSBiLhLFIGIuEsUgYi4Sx+G9mHiJBBSjbGOZgAAAAAElFTkSuQmCC"/>
  <circle class="cls-1" cx="75" cy="75" r="61"/>
</svg>

Learn other animation using Advanced CSS