小编Ham*_*mdi的帖子

简单的 svg css 进度圈

我正在尝试寻找一种方法来实现没有动画的简单进度圈(静态)。我发现的示例具有非常不同的百分比偏移量,如下例所示。如何以这样的方式制作进度圈:如果我提供偏移量为 50%,那么它恰好是 50%(半填充)?

.u-absoluteCenter {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
.u-flexCenter {
  display: flex;
  align-items: center;
  justify-content: center;
}
.u-offscreen {
  position: absolute;
  left: -999em;
}
.demo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.progress {
  transform: rotate(-90deg);
}
.progress__value {
  stroke-dasharray: 0;
  stroke-dashoffset: 0;
}
@-webkit-keyframes progress {
  from {
    stroke-dashoffset: 339.292;
  }
  to {
    stroke-dashoffset: 0;
  } …
Run Code Online (Sandbox Code Playgroud)

html css svg

7
推荐指数
2
解决办法
1万
查看次数

标签 统计

css ×1

html ×1

svg ×1