Is it possible to draw a partial circle outline in CSS (open ring shape)?

css css-animations css-shapes
colindunn picture colindunn · Feb 14, 2017 · Viewed 20.4k times · Source

I'm interested in creating a loading spinner entirely in CSS but in order to do so I would need to be able to draw a open ring shape like this:

enter image description here

The ring would draw itself around the circumference of the circle. Is this achievable in CSS?

Answer

Dylan Stark picture Dylan Stark · Feb 14, 2017

To create a circle that gradually draws it's outer path, use SVG.

SVG's stroke-dasharray property will turn any path into a dashed line, which you can use to your advantage by setting the dash size to be almost as long as the path itself.

Then use a CSS animation to gradually change the stroke-dashoffset to move the dash around the perimeter of your circle.

circle {
  fill: white;
  stroke: black;
  stroke-width: 2;
  stroke-dasharray: 250;
  stroke-dashoffset: 1000;
  animation: rotate 5s linear infinite;
}

@keyframes rotate {
  to {
    stroke-dashoffset: 0;
  }
}
<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" />
</svg>

Related questions

Filling water animation

I am trying to get a wipe up animation to make a circle look like it's filling with water. I've run into two errors, and haven't been able to even tackle the 3rd one: It fills up the wrong way …

Read More
How can I create pure CSS 3-dimensional spheres?

tl;dr: I would like to create an actual 3d sphere with CSS - not just an illusion Note: some of the snippet examples are not responsive. Please use full screen. With pure CSS you can create and animate a 3…

Read More
How to make blinking/flashing text with CSS 3

Currently, I have this code: @-webkit-keyframes blinker { from { opacity: 1.0; } to { opacity: 0.0; } } .waitingForConnection { -webkit-animation-name: blinker; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1); -webkit-animation-duration: 1.7s; } It blinks, but it only blinks in "one direction". I mean, it only fades out, and then it appears back …

Read More