CSS SVG 路径 - 圆形进度条（小修改）

Question

正如您将在下面的代码中看到的那样，我有一个可爱的圆形进度条，但是我有几个问题并且对如何实现这一点有些迷茫（理想情况下我不想使用任何 JS）

1. 我想让周围的粉红色条弯曲而不是 平，这可能吗？喜欢它的边缘。所以而不是它 |开头和结尾有点像)。
2. 中间跳动的圆圈，是否可以暂停 动画在开始之前完成大约 1 秒 再来一次？

/* Load Progress Animation */

@-webkit-keyframes load {
  0% {
    stroke-dashoffset: 0
  }
}
@-moz-keyframes load {
  0% {
    stroke-dashoffset: 0
  }
}
@keyframes load {
  0% {
    stroke-dashoffset: 0
  }
}
/* Qik Progress Container */

.progress {
  position: relative;
  display: inline-block;
  padding: 0;
  text-align: center;
}
/* Item SVG */

.progress svg {
  width: 4rem;
  height: 4rem;
}
.progress svg:nth-child(2) {
  position: absolute;
  left: 0;
  top: 0;
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
}
.progress svg:nth-child(2) path {
  fill: none;
  stroke-width: 20;
  stroke-dasharray: 629;
  stroke: rgba(60, 99, 121, 0.9);
  -webkit-animation: load 8s;
  -moz-animation: load 8s;
  -o-animation: load 8s;
  animation: load 8s;
}
.pulse {
  border-radius: 50%;
  width: 18px;
  height: 18px;
  background: #ff1251;
  position: absolute;
  top: 1.45rem;
  left: 1.45rem;
  -webkit-animation: pulse 0.6s linear infinite;
  -moz-animation: pulse 0.6s linear infinite;
  -ms-animation: pulse 0.6s linear infinite;
  animation: pulse 0.6s linear infinite;
}
@keyframes "pulse" {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -moz-transform: scale(0.8);
    -o-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
  }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
@-moz-keyframes pulse {
  0% {
    -moz-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -moz-transform: scale(0.8);
    transform: scale(0.8);
  }
  100% {
    -moz-transform: scale(1);
    transform: scale(1);
  }
}
@-webkit-keyframes "pulse" {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-ms-keyframes "pulse" {
  0% {
    -ms-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -ms-transform: scale(0.8);
    transform: scale(0.8);
  }
  100% {
    -ms-transform: scale(1);
    transform: scale(1);
  }
}

<div class="progress">
  <svg viewBox="-10 -10 220 220">
    <g fill="none" stroke-width="20" transform="translate(100,100)">
      <path d="M-100,0a100,100 0 1,0 200,0a100,100 0 1,0 -200,0" stroke="#FF1252" stroke-linejoin="round" />
    </g>
  </svg>
  <svg viewBox="-10 -10 220 220">
    <path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z" stroke-dashoffset="629"></path>
  </svg>
  <div class="pulse"></div>
</div>

Answer 1

我已经重写了整个代码。

对于您的第一个问题，您可以简单地使用stroke-linecap="round"。

对于第二个，您必须为延迟添加额外的 @keyframes 规则。

body {
  background: #072237;
}
h3 {
  color: #ffffff;
}
#loader {
  position: relative;
  width: 80px;
  height: 80px;
}
#ring {
  -webkit-animation: load 6s 1 forwards;
  animation: load 6s 1 forwards;
}
#circle {
  position: absolute;
  width: 20px;
  height: 20px;
  top: 50%;
  left: 50%;
  margin-left: -10px;
  margin-top: -10px;
  background: #FF1251;
  border-radius: 50%;
  transform: scale(0.8);
  -webkit-animation: pulse 1.2s 3;
  animation: pulse 1.2s 3;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}
@-webkit-keyframes pulse {
  0% {
    transform: scale(0.8);
  }
  20% {
    transform: scale(1);
  }
  40% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(0.8);
  }
}
@keyframes pulse {
  0% {
    transform: scale(0.8);
  }
  20% {
    transform: scale(1);
  }
  40% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(0.8);
  }
}
@-webkit-keyframes load {
  80% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes load {
  80% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

<div id="loader">
  <svg height="80" width="80" viewBox="-10 -10 220 220">
    <path id="back" d="M0,100 a100,100 0 1 0 200,0 a100,100 0 1 0 -200,0" fill="#FFFFFF" stroke="#034870" stroke-width="20" stroke-linecap="round" />
    <path id="ring" d="M100,0 a100,100 0 0 1 0,200 a100,100 0 0 1 0,-200,0" fill="none" stroke="#FF1251" stroke-width="20" stroke-dasharray="629" stroke-linecap="round" stroke-dashoffset="629" />
  </svg>
  <div id="circle"></div>
</div>

Answer 2

没有。 1. 可以使用stroke-linecap，但它需要对您的代码进行一些更改，因为在您的情况下，红线实际上是背景而灰色是笔划 - 所以它会导致一个凹圆，所以“（”，不是“）”在红线的末尾。 2. 可以使用设置为alternate 的较长动画来完成，因此它会在 50% 和 100% 之间“休眠”并返回。我做了一些更改：

http://jsfiddle.net/3yq3kmo1/

SVG 的变化（第二个元素）：

<svg viewBox="-10 -10 220 220">
    <circle r="100" cx="100" cy="100" stroke-dashoffset="0" />
</svg>

CSS（请注意，dashoffset 已反转，因此现在红色笔划会增大并隐藏灰色，而不是红色缩小并显示灰色；第一个 SVG 元素中路径上的 stroke 现在是灰色的。）

.progress svg:nth-child(2) circle {
  fill: none;
  stroke-width: 20;
  stroke-dasharray: 629;
  stroke: #ff1251;
  stroke-linecap:round;
  animation: load 8s;
}

动画中的暂停：

.pulse {
   animation: pulse 1.6s linear infinite alternate;
 }
 @keyframes pulse {
 0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
 }