CSS круговой прогресс, линейные секунды не точны?

Question

С https://jsfiddle.net/uk9gvsao/7/, Я хочу, чтобы это заняло 20 секунд.Несмотря на то, что у меня там 40-е, кажется, что это займет около 12 секунд.Я могу просто увеличить 40-е, но мне было интересно, почему он не был точным.

Кроме того, я хотел бы, чтобы сразу было создано серебряное кольцо, затем белое кольцо постепенно перезаписывает его, так что пользователь видит ожидаемый путь белогокольцо.Может кто-нибудь показать, как это сделать там?Tia.

<div class='a1'>
    <svg height="40" width="40">
        <circle cx="20" cy="20" r="12" stroke="white" stroke-width="5" fill="black" />
    </svg>
</div>

CSS:

.a1 {
    background-color: black;
    width: 40px;
    height: 40px;
}

svg {
    transform: rotate(-90deg);
    stroke-dasharray: 251;
    /* (2PI * 40px) */
    stroke-dashoffset: 251;
    animation: offsettozero 40s linear forwards;
}

@keyframes offsettozero {
    to {
        stroke-dashoffset: 0;
    }
}

Answer 1

Вы можете настроить stroke-dasharray, чтобы сохранить 0 анимации.Вы также можете рассмотреть маленький radial-gradient для создания нижнего круга:

.a1 {
  background-color: black;
  width: 40px;
  height: 40px;
}

svg{
  transform: rotate(-90deg);
  stroke-dasharray: 76;
  /* 12 x 3.14(PI) x 2*/
  stroke-dashoffset: 76;
  animation: offsettozero 10s linear forwards;
  
  /*bottom circle*/
  background:radial-gradient(circle at 20px 20px,
    transparent 9px,red 10px,red 14px,transparent 15px);
  /*we canget rid of [circle at 20px 20px] since it's the center by default*/
}

@keyframes offsettozero {
  to {
    stroke-dashoffset: 0;
  }
}

<div class='a1'>
  <svg height="40" width="40">
     <circle cx="20" cy="20" r="12" stroke="white" stroke-width="5" fill="transparent" />
   </svg>
</div>

Answer 2

Итак, как указывает @fcalderan, временной интервал должен быть 176, также мы дублируем svg и размещаем их друг над другом.Фон служит в качестве руководства, а верхний - анимированный.

Таким образом, ваш код изменится на:

<div class='a1'>
<svg height="40" width="40" class="bg">
    <circle cx="20" cy="20" r="12" stroke="rgba(99, 99, 99, 0.5)" stroke-width="5" fill="black" />
</svg>  
<svg height="40" width="40" class="first">
    <circle cx="20" cy="20" r="12" stroke="white" stroke-width="5" fill="black" />
</svg>

... и CSS...

.a1 {
    background-color: black;
    width: 40px;
    height: 40px;
}

.a1 svg {
    position: absolute;
}

.first {
    transform: rotate(-90deg);
    stroke-dasharray: 251;
    /* (2PI * 40px) */
    stroke-dashoffset: 251;
    animation: offsettozero 176s linear forwards;
}

@keyframes offsettozero {
    to {
        stroke-dashoffset: 0;
    }
}

Answer 3

Вам нужно настроить значение stroke-dashoffset на последнем ключевом кадре

@keyframes offsettozero {
   to {
      stroke-dashoffset: 176;
   }
}

Визуально вы не видите никакой разницы между 0 и 176, но в первом случае анимация все еще остаетсяпревышение необходимого значения.

Чтобы лучше понять, вы можете попытаться установить значение 175 и посмотреть, как работает анимация.

Jsfiddle fork