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?

score 9 · Accepted Answer · edited May 23 '17 at 12:33

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>

I guess according to his example, It should transit from 314 to 0. — m4n0, Nov 18 '15 at 11:50
@ManojKumar: It actually seems to be going both ways in that GIF, so edited the animation :) It might need a bit of rotation also (in-order for the wipe to start at top middle, instead of right middle) but I'd probably leave that to OP (if in case they want an exact replica). — Harry, Nov 18 '15 at 11:53
@Harry Wow. You've just blown my mind. SVGs are something I'm only just beginning to understand. Very cool. The GIF goes both ways as I'd like to toggle this animation on and off to indicate an `.active` state. Looking at your `@keyframes` and trying to work out what value would need to change so that the radial wipe began 90° counter clockwise? This leads me to one more question—hope you don't mind—I have always thought of SVGs as a pre-existing asset that I could call in with an `` tag. Am I right in understanding that you've created a stand alone SVG from nothing in your example above? — DanMad, Nov 18 '15 at 13:14
@DanMad: Yes, what I have used is inline SVG. That is, the code that is required to create the SVG circle is embedded within the HTML code itself. SVG circles generally start from 0deg of X-axis and so to make it start the wipe from 90deg (counter clockwise), we can just add a simple `transform: rotate(-90deg)` to the SVG element itself. I have updated the code snippet in the answer :) To toggle the animation on/off you would be better off using transition than animation, I'll add a version with hover transition shortly. — Harry, Nov 18 '15 at 13:19
@Harry: You said, "CSS is not the right tool for animations like these. While you can do it with CSS, best is to make use of SVG". Why is that? — Protector one, Feb 19 '18 at 12:14

Radial wipe with pure CSS; if not SVG alternative

1 Answers1