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

Question

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:

The ring wo

Answer 1

You can just take a pseudo element ::after to create the open part, with just overlapping the circle element. Advantage is, that the open part can be as long as wished (not limited to a 3/4 full circle).

.circle {
  width: 100px;
  height: 100px;
  border: 2px solid;
  border-radius: 50%;
  margin: 30px;
  animation: rotate 1s infinite linear;
}
.circle::after {
  content: "";
  display: block;
  width: 80px;
  height: 80px;
  background: white;
  border-radius: 50%;
  margin: -30% 0 0 -30%;
}
@keyframes rotate {
  0%    { transform: rotate(0deg);  }
  100%  { transform: rotate(360deg);  }
}