Using SVG (part 2) to create animated SVG spinner by CSS transforms

Following the introduction about SVG, here we explain an example using SVG to create animated SVG spinner by CSS transforms.

The animated SVG spinner

In this example form sitepoint we create an animated SVG spinner loader which is based on a few tags in SVG and some attributes to identify the animation and its behaviour. 

The SVG code

This is the animated SVG spinner code which uses a few tags:

<svg class="spinner" viewBox="0 0 66 66" xmlns="https://www.w3.org/2000/svg"> <!-- 1 -->

  <circle class="path spinner-border" cx="33" cy="33" r="31" stroke="url(#gradient)"></circle> <!-- 2 -->

  <linearGradient id="gradient"> <!-- 3 -->
    <stop offset="50%" stop-color="#000" stop-opacity="1"></stop>
    <stop offset="65%" stop-color="#000" stop-opacity=".5"></stop>
    <stop offset="100%" stop-color="#000" stop-opacity="0"></stop>
  </linearGradient>

  <circle class="path spinner-dot" cx="37" cy="3" r="2"></circle> <!-- 4 -->

</svg>

Firstly the value of the vieBox. attribute is a list of four numbers min-xmin-ywidth and height. Therefor viewBox="0 0 66 66" means that the viewport is 66 by 66.

Secondly the first circle is located at (33,33)and the radius is 31px. Also stroke="url(#gradient)" means the stroke colour will be identified by an element with the id of gradient.

The linearGradient tag is the one that defines stroke colour. It also has three stops as like in CSS when we define stops for our gradient. Moreover it has opacity for each to add the effect as well.

Lastly the second circle is the had of the spinner to be followed.

The CSS for animated SVG spinner

The stroke-dasharray attribute is a presentation attribute defining the pattern of dashes and gaps used to paint the outline of the shape and can be used in CSS as well for some limited tags.

The stroke-dashoffset attribute is a presentation attribute defining an offset on the rendering of the associated dash array. We define them for the spinner body as the first circle:

.path {
  stroke-dasharray: 170;
  stroke-dashoffset: 20;
}

However we need to define the .spinner-border as well to make a full circle:

.spinner-border {
  fill: transparent;
  stroke-width: 2;
  width: 100%;
  height: 100%;
}

This just makes the circle as it should look like. We need to limit the width and height of the viewBox then to limit the circle in our defined area:

.spinner {
  margin: 10px;
  width: 180px;
  height: 180px;
}

That’s better. We also need to add the animated SVG head look like a dot:

.spinner-dot {
  stroke: #000;
  stroke-width: 1;
  fill: #000;
}

With stroke property we add border to our animated SVG dot shape and with fill we give it a colour.

Animation for animated SVG shape

Finally comes the interesting part which is the animation. We need to have two animation. First the rotation of the big circle and second the skew of the dot shape head:

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

We will add this rotate keyframe as the animation for the big circle. Also we define the skew animation for the dot head:

@keyframes skew {
  from {
    transform: skewX(10deg)
  }
  to {
    transform: skewX(40deg)
  }
}

As a result we have an animated SVG spinner with a dot shape head that spins infinitely as we speak. This is the pen for this example:

https://codepen.io/SitePoint/pen/wEwRvNs

In this example the CSS transform has been combined with SVG and some of its tags and the result is a nice animated SVG shape which could be an inspiration for animation with SVG tag. Thanks for reading.

© 2019
Azadeh Faramarzi

This site is created and maintined by Azadeh Faramarzi , A passionate developer, sport and code lover who loves to share and write when she has some time.