Question

正如您将从下面的代码中看到的，我有一个可爱的循环进度条但是我有一些问题而且有点失去了如何实现这一点（理想情况下我不想使用任何JS）

我想让粉红色的条纹弯曲而不是弯曲这是可能的吗？喜欢它的边缘。而不是它 |它会在开始和结束时都有点像。
中间的悸动圈，它有可能暂停一旦动画在开始之前完成，就像1秒一样再次？

＆＃13;

/* 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);
  }
}

＆＃13;

<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>

＆＃13;

Answer 1

我重写了整个代码。

对于您的第一个问题，您只需使用stroke-linecap="round"。

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

＆＃13;

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;
  }
}

＆＃13;

<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>

＆＃13;

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);
  }
 }

CSS SVG路径 - 循环进度条（小修正）

2 个答案: