CSS анимация, как выровнять круг after?

Question

[Cheizer]

Друзья, подскажите пожалуйста, почему круг анимации не равен кругу родителя? И как выровнять круг анимации, что бы он следовал по кругу родителя?

Сейчас так


А хочется так


Вот живой пример: https://codepen.io/Cheizer/pen/GRRveGg

Answer 1

[Михаил]

*, *::before, *::after {
  box-sizing: border-box
}

Это уже давнишний "стандарт", если не устраивает *, то ставьте только на этот элемент

Comments

[Cheizer]

Благодарю, вроде ровно стало, но стало внутри родителя, а как бы пустить по контуру родителя?

[Михаил]

Роман Кузнецов,

.bt-spinner::before {
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  top: -1px;
  left: -1px;
}

увеличивать и двигать на ширину границы

[Cheizer]

Михаил, БЛАГОДАРЮ!