Не пойму почему двигается border SCSS?

Question

[Artem Mishurovskiy]

В общем есть кнопка загрузка , при клике не нее происходит загрузка ( анимация ) и потом возвращается в обычную кнопку зеленую.
Суть в том что при загрузке border крутится но его чуть чуть кидает то вверх то вниз, в центр мне надо вставить circle то он тоже шевелится, на месте не стоит

HTML

<div class="container">
    <button [disabled]="authForm.invalid" #button></button>
</div>

SCSS

$primary-body-color: rgb(21, 20, 25); // background color
$border-color: rgb(86, 85, 90); // border color
$primary-text-input-color: rgb(126, 125, 133); // text color auth page
$primary-text-title: rgb(231, 229, 234); // title & reset color
$primary-green: #3F9F88; // green color
$primary-fonts: "Open Sas", sans-serif; // font
$primary-first-btn-color: linear-gradient(7deg, #534b82 30%, #6f437d 70%); // basic-button gradient


button {
  width: 20.9vh;
  position: relative;
  height: 3vh;
  border-radius: 3vh;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.25s ease-in-out;
  background: $primary-first-btn-color;
  color: $primary-text-title;
  font:{
    size: 1.2vh;
    weight: 400;
    family: $primary-fonts;
  }
  &:hover {
    box-shadow: 0 10px 10px rgba(0,0,0,0.5);
  }
  &:active {
  }
  &:after {
    content:"Login";
  }
}

.onClick {
  width: 3vh;
  border: 0.3vh solid #2f2f2f;
  border-bottom: 0.3vh solid #3F9F88;
  animation: rotating 1s 0.25s linear infinite;
  background: transparent;
  &:after {
    display: none;
    //content: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='19' width='19'><path d='M9.875,0.625C4.697,0.625,0.5,4.822,0.5,10s4.197,9.375,9.375,9.375S19.25,15.178,19.25,10S15.053,0.625,9.875,0.625' fill='blue' /></svg>");
  }
  &:hover {
    cursor: not-allowed;
    box-shadow: none;
  }
}

.validate {
  font-size: 1vh;
  color: white;
  background: $primary-green;
  &:after {
    content: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='24' width='24'><path d='M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z' fill='white' /></svg>");
  }
  &:hover {
    cursor: not-allowed;
  }
}

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Вот собственно видео
https://www.veed.io/view/d3952f4c-2aa2-4bf6-8441-2...

https://codepen.io/Innerbloom/pen/wvxjaWL

Comments

[Artem Mishurovskiy]

Хотя в песочнице вроде бы более менее все норм, если присмотрется то тоже есть шевеление

[FrelFrloich]

Артем Мишуровский, will-change: transform; к кнопке примените.

Answer 1

[beryukra3252]

Похоже, проблема может быть вызвана применением CSS-анимации к элементу кнопки, из-за чего кнопка слегка перемещается во время анимации. Один из способов исправить это — добавить элемент-контейнер вокруг кнопки и вместо этого применить анимацию к этому элементу-контейнеру. Таким образом, сама кнопка не будет двигаться во время анимации, а элемент-контейнер будет вращать границу. Кроме того, вы можете добавить position: absolute к элементу круга и установить его свойства top и left, чтобы выровнять его по центру кнопки.