小编Mar*_*aby的帖子

我在SVG中创建了加载微调器,但是动画持续时间并不准确.例如:

• 30s动画持续时间〜26s真实
• 45s动画持续时间〜实际38秒
• 60年代动画持续时间〜实际上51秒

我很绝望,我不知道哪里可能有错.你能帮助我吗？

旋转器#1的屏幕

旋转器#2的屏幕 - 稍后

<svg class="circle">
  <circle cx="23" cy="23" r="20"/>
</svg>

减:

@spinnerSize: 46;

svg.spinner {
  display: block;
  width: (@spinnerSize + 0px);
  height: (@spinnerSize + 0px);
  x: 0px;
  y: 0px;
  background: url("../images/ico_timer_small.png") center center no-repeat;

  circle {
    fill: transparent;
    stroke: #027eff;
    stroke-width: 3;
    stroke-dasharray: (3.14 * @spinnerSize);
    transform-origin: (0.5px * @spinnerSize) (0.5px * @spinnerSize) 0;
    transform: rotate(-90deg);
    animation-name: spinner;
    animation-timing-function: linear;
    animation-duration: 30s;
    stroke-linecap: butt;
  }
}

@keyframes spinner {
  from {
    stroke-dashoffset: (3.14 * …