如何用css如何实现如下效果？

Question

我想实现一个动画效果，比如下图，刚开始的时候圆的边框是#efefef， 经过1s动画后边框为#3498db。

刚开始：

1s后：

我看到用svg可以实现这种效果，而且也可以加上动画。如果用纯css来实现的话，怎么做呢，一点思路没有，请大家帮帮忙，谢谢。

Answer 1

尝试做了一个小Demo
demo

Answer 2

这个就行了 https://segmentfault.com/a/11...

Answer 3

不难写，两个div，外层比内层略大，于是边缘就出来了，中心的勾，可以用伪元素背景旋转。

可能难以想到怎么画进度，这个可以利用外层div的background属性, conic-gradient。

.container {
  --size: 60px;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  /* --deg: 90deg; */
  --deg: 30%;
  padding: 5px;
  background: conic-gradient(green 0, green var(--deg), #ddd var(--deg), #ddd 100%)
}

.inner {
  background: #fff;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
}

只要改变--deg变量的值，就可以画出任意百分比的进度～