Radial wipe with pure CSS; if not SVG alternative

Question

I have found this question that's been answered and seems to achieve a radial wipe animation with an SVG.

I am looking to achieve a border: 1px solid green; effect like the following example:

What I would like to know though is if this is possible with pure CSS —that would be ideal.

If it's not achievable with CSS, how would I tackle this type of thing with SVG?

Answer 1

CSS is not the right tool for animations like these. While you can do it with CSS, best is to make use of SVG. For a pure CSS version you could try adapting the snippet provided in my answer here but I wouldn't really be recommending it because as you can see it is very complex.

All you have to do is use a circle element, set its stroke-dasharray equal to the circumference of the circle and then animate the stroke-dashoffset like in the below snippet.

The stroke-dasharray property creates a dotted line stroke for the cirlce (the border) where each of the stroke and the dash between them will have the length as specified for the property.

The stroke-dashoffset property specifies the offset at which the circle's stroke should start. When the offset is at 0, the green colored stroke is visible whereas when the offset is at 314 (equal to the circumference), the dash in between strokes become visible. Thus it ends up producing a wipe effect.

svg {
  height: 100px;
  width: 100px;
  transform: rotate(-90deg);
}
circle {
  stroke: green;
  fill: none;
  stroke-dasharray: 314; /* equal to circumference of circle 2 * 3.14 * 50 */
  animation: wipe 2s linear infinite;
}
@keyframes wipe {
  0% {
    stroke-dashoffset: 0;
  }
  30%, 50% {
    stroke-dashoffset: 314;
  }
  80%, 100% {
    stroke-dashoffset: 0;
  }  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<svg viewBox='0 0 100 100'>
  <circle cx='50' cy='50' r='40' />
</svg>

---

The above sample uses an infinite animation and so the wipe and repaint would run continuously. If it has to be toggled on/off then it would be better to use transition like in the below snippet. I have done this on :hover but you can easily adapt it to click or other events.

svg {
  height: 100px;
  width: 100px;
  transform: rotate(-90deg);
}
circle {
  stroke: green;
  fill: none;
  stroke-dasharray: 314; /* equal to circumference of circle 2 * 3.14 * 50 */
  stroke-dashoffset: 0; /* initial setting */
  transition: all 2s;
}
svg:hover circle{
  stroke-dashoffset: 314;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<svg viewBox='0 0 100 100'>
  <circle cx='50' cy='50' r='40' />
</svg>